在扩展面板上选择收音机会更改另一个组件 vuetify 中的属性

Question

I have a component with expansion panels and radio buttons. and another component with bunch of pictures. My goal is to either show or not show the pictures based on what radio button is selected.

I have written a code but it doesn't work:

This is the component with radio buttons(IFModule.vue):

<template>
 .
 . 
  <app-ifpics></app-ifpics>
  <v-expansion-panel
  >
    <v-expansion-panel-content class="elevation-0"
                               v-for="(item,i) in stuff"
                               :key="i"
                               :label="item.label"
    >
      <div slot="header">{{item.label}}
        <v-radio-group height="0" row
                       :mandatory="false" v-model="item.subsYes"
                       @click.stop="showPicture(i, value)">


          <v-radio label="Yes" value="Yes" ></v-radio>
          <v-radio label="No"  value="No"></v-radio>
        </v-radio-group>
      </div>

      <v-card>
        <v-card-text>{{item.detail}}</v-card-text>
      </v-card>
    </v-expansion-panel-content>
  </v-expansion-panel>
 .
 .
</template>

<script>
  import IFPics from "./IFPic";
  import { ifBus } from "../../../main";

  export default {
    data(){
      return{
        stuff: [
          {label: 'Do you want this board', detail: 'Details: This is a very good board.', subsYes: 'input3', subsNo: 'input3No'},
      {label: 'Do you want this board', detail: 'Details: This is a very good board.', subsYes: 'input2', subsNo: 'input2No'},
      {label: 'Do you want this board', detail: 'Details: This is a very good board.', subsYes: 'input1', subsNo: 'input1No'},
      {label: 'Do you want this board', detail: 'Details: This is a very good board', subsYes: 'output7', subsNo: 'output7No'},
      {label: 'Do you want this board', detail: 'Details: This is a very good board', subsYes: 'output6', subsNo: 'output6No'},
      {label: 'Do you want this board', detail: 'Details: This is a very good board', subsYes: 'output5', subsNo: 'output5No'},
      {label: 'Do you want this board', detail: 'Details: This is a very good board', subsYes: 'output4', subsNo: 'output4No'},
      {label: 'Do you want this board', detail: 'Details: This is a very good board', subsYes: 'output3', subsNo: 'output3No'},
      {label: 'Do you want this board', detail: 'Details: This is a very good board', subsYes: 'output2', subsNo: 'output2No'},
      {label: 'Do you want this board', detail: 'Details: This is a very good board', subsYes: 'output1', subsNo: 'output1No'},
      {label: 'Do you want this board', detail: 'Details: This is a very good board', subsYes: 'power', subsNo: 'powerNo'}
        ]
      }
    },
   methods:{
      showPicture(index){
        const hasan = this.stuff[index].subsYes;
        const asghar = this.stuff[index].subsNo;
        ifBus.$emit('value', hasan);
        ifBus.$emit('item', asghar);
      }
    },
    components:{
      appIfpics: IFPics
   }
  }
</script>

And here is my component with pictures(IFPic.vue):

<template>
  <div>
      .
      .
      <v-layout column>
        <div id="pic">
          <img src="../../../assets/Subrackpics/IF/EmptySub.png" height="236" width="500"/>
        </div>
        <img v-if="shoPower" src="../../../assets/Subrackpics/IF/power.png" height="232"  width="71" id="power" >
        <img v-if="showOutput1 " src="../../../assets/Subrackpics/IF/output1.png" height="233" width="46" id="output1">
        <img v-if="showOutput2" src="../../../assets/Subrackpics/IF/output2.png" height="233" width="47" id="output2">
        <img v-if="showOutput3"  src="../../../assets/Subrackpics/IF/output3.png" height="233" width="48" id="output3">
        <img v-if="showOutput4" src="../../../assets/Subrackpics/IF/output4.png" height="233" width="46" id="output4">
        <img v-if="showOutput5" src="../../../assets/Subrackpics/IF/output5.png" height="233" width="47" id="output5">
        <img v-if="showOutput6" src="../../../assets/Subrackpics/IF/output6.png" height="233" width="47" id="output6">
        <img v-if="showOutput7" src="../../../assets/Subrackpics/IF/output7.png" height="233" width="47" id="output7">
        <img v-if="showInput1" src="../../../assets/Subrackpics/IF/input1.png" height="233" width="37" id="input1">
        <img v-if="showInput2"  src="../../../assets/Subrackpics/IF/input2.png" height="233" width="37" id="input2">
        <img v-if="showInput3"  src="../../../assets/Subrackpics/IF/input3.png" height="233" width="37" id="input3">
      . 
      .
</template>

<script>
  import { ifBus } from "../../../main";

  export default {
    data() {
      return {
        item:'',
        value:'',
        shoPower:'',
        showOutput7:'',
        showOutput6:'',
        showOutput5:'',
        showOutput4:'',
        showOutput3:'',
        showOutput2:'',
        showOutput1:'',
        showInput3:'',
        showInput2:'',
        showInput1:'',
      }
    },
 created() {
  ifBus.$on('value', hasan => {
    this.value = hasan
  });
  ifBus.$on('item', asghar => {
    this.item = asghar
  });

  if (this.item === 'powerNo' && this.value === 'Yes') {
    this.shoPower = true;
  }
  else if (this.item === 'powerNo' && this.value === 'No') {
    this.shoPower = false;
  }

  if (this.item === 'output1No' && this.value === 'Yes') {
    this.showOutput1 = true;
  }
  else if (this.item === 'output1No' && this.value === 'No') {
    this.showOutput1 = false;
  }

  if (this.item === 'output2No' && this.value === 'Yes') {
    this.showOutput2 = true;
  }
  else if (this.item === 'output2No' && this.value === 'No') {
    this.showOutput2 = false;
  }

  if (this.item === 'output3No' && this.value === 'Yes') {
    this.showOutput3 = true;
  }
  else if (this.item === 'output3No' && this.value === 'No') {
    this.showOutput3 = false;
  }

  if (this.item === 'output4No' && this.value === 'Yes') {
    this.showOutput4 = true;
  }
  else if (this.item === 'output4No' && this.value === 'No') {
    this.showOutput4 = false;
  }

  if (this.item === 'output5No' && this.value === 'Yes') {
    this.showOutput5 = true;
  }
  else if (this.item === 'output5No' && this.value === 'No') {
    this.showOutput5 = false;
  }

  if (this.item === 'output6No' && this.value === 'Yes') {
    this.showOutput6 = true;
  }
  else if (this.item === 'output6No' && this.value === 'No') {
    this.showOutput6 = false;
  }

  if (this.item === 'output7No' && this.value === 'Yes') {
    this.showOutput7 = true;
  }
  else if (this.item === 'output7No' && this.value === 'No') {
    this.showOutput7 = false;
  }

  if (this.item === 'input1No' && this.value === 'Yes') {
    this.showInput1 = true;
  }
  else if (this.item === 'input1No' && this.value === 'No') {
    this.showInput1 = false;
  }

  if (this.item === 'input2No' && this.value === 'Yes') {
    this.showInput2 = true;
  }
  else if (this.item === 'input2No' && this.value === 'No') {
    this.showInput2 = false;
  }

  if (this.item === 'input3No' && this.value === 'Yes') {
    this.showInput3 = true;
  }
  else if (this.item === 'input3No' && this.value === 'No') {
    this.showInput3 = false;
  }
}

So again for example I want to select yes on the first group of radiobuttons and by doing so one of the pictures show and if I click no the picture disappears and so on.

What's the best way to do it?

Answer 1

created method only run once when component is created, so your if else conditions are not called when ifBus receive event. You need to put it in event handler function. Here I extract all conditions to a separate method:

created() {
  ifBus.$on('value', hasan => {
    this.value = hasan
    this.changeDisplay()
  });
  ifBus.$on('item', asghar => {
    this.item = asghar
    this.changeDisplay()
  });
},
methods: {
  changeDisplay() {
    if (this.item === 'powerNo' && this.value === 'Yes') {
      this.shoPower = true;
    }
    else if (this.item === 'powerNo' && this.value === 'No') {
      this.shoPower = false;
    }

    if (this.item === 'output1No' && this.value === 'Yes') {
      this.showOutput1 = true;
    }
    else if (this.item === 'output1No' && this.value === 'No') {
      this.showOutput1 = false;
    }

    if (this.item === 'output2No' && this.value === 'Yes') {
      this.showOutput2 = true;
    }
    else if (this.item === 'output2No' && this.value === 'No') {
      this.showOutput2 = false;
    }

    if (this.item === 'output3No' && this.value === 'Yes') {
      this.showOutput3 = true;
    }
    else if (this.item === 'output3No' && this.value === 'No') {
      this.showOutput3 = false;
    }

    if (this.item === 'output4No' && this.value === 'Yes') {
      this.showOutput4 = true;
    }
    else if (this.item === 'output4No' && this.value === 'No') {
      this.showOutput4 = false;
    }

    if (this.item === 'output5No' && this.value === 'Yes') {
      this.showOutput5 = true;
    }
    else if (this.item === 'output5No' && this.value === 'No') {
      this.showOutput5 = false;
    }

    if (this.item === 'output6No' && this.value === 'Yes') {
      this.showOutput6 = true;
    }
    else if (this.item === 'output6No' && this.value === 'No') {
      this.showOutput6 = false;
    }

    if (this.item === 'output7No' && this.value === 'Yes') {
      this.showOutput7 = true;
    }
    else if (this.item === 'output7No' && this.value === 'No') {
      this.showOutput7 = false;
    }

    if (this.item === 'input1No' && this.value === 'Yes') {
      this.showInput1 = true;
    }
    else if (this.item === 'input1No' && this.value === 'No') {
      this.showInput1 = false;
    }

    if (this.item === 'input2No' && this.value === 'Yes') {
      this.showInput2 = true;
    }
    else if (this.item === 'input2No' && this.value === 'No') {
      this.showInput2 = false;
    }

    if (this.item === 'input3No' && this.value === 'Yes') {
      this.showInput3 = true;
    }
    else if (this.item === 'input3No' && this.value === 'No') {
      this.showInput3 = false;
    }
  }
}

By the way, you should try to avoid many if else condition like that. You should create mapping and check condition with for loop.

Reference to Vue component lifecycle diagram