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

我有一个带有扩展面板和单选按钮的组件。还有一个组件有一堆图片。我的目标是根据选择的单选按钮显示或不显示图片

我已经编写了一个代码，但它不起作用：

这是带有单选按钮（IFModule.vue）的组件：

.
. 
{{item.label}
{{item.detail}
.
.
从“/IFPic”导入IFPic；
从“../../../main”导入{ifBus}；
导出默认值{
数据（）{
返回{
材料：[
{label:'youwant this board'，detail:'Details:这是一个非常好的board'，subyes:'input3'，subsNo:'input3No'}，
{label:'youwant this board'，detail:'Details:这是一个非常好的board'，subyes:'input2'，subsNo:'input2No'}，
{label:'youwant this board'，detail:'Details:这是一个非常好的board'，subsies:'input1'，subsNo:'input1No'}，
{label:'youwant this board'，detail:'Details:这是一个非常好的board'，subyes:'output7'，subsNo:'output7No'}，
{label:'you want this board'，detail:'Details:这是一个非常好的board'，subyes:'output6'，subsNo:'output6No'}，
{label:'you want this board'，detail:'Details:这是一个非常好的board'，subyes:'output5'，subsNo:'output5No'}，
{label:'youwant this board'，detail:'Details:这是一个非常好的board'，subyes:'output4'，subsNo:'output4No'}，
{标签：“你想要这个板吗”，细节：“细节：这是一个非常好的板”，子选项：“output3”，子选项：“output3No”}，
{label:'you want this board'，detail:'Details:这是一个非常好的board'，subyes:'output2'，subsNo:'output2No'}，
{label:'youwant this board'，detail:'Details:这是一个非常好的board'，subyes:'output1'，subsNo:'output1No'}，
{标签：'你想要这个板吗'，细节：'细节：这是一个非常好的板'，子选项：'电源'，子选项：'电源'}
]
}
},
方法：{
showPicture（索引）{
const hasan=this.stuff[index].subyes；
const asghar=this.stuff[index].subsNo；
ifBus.$emit（'value'，hasan）；
ifBus.$emit（'item'，asghar）；
}
},
组成部分：{
应用程序：应用程序
}
}

这是我的组件和图片（IFPic.vue）：

.
.
. 
.
从“../../../main”导入{ifBus}；
导出默认值{
数据（）{
返回{
项目：“”，
值：“”，
店主：“，
showOutput7:“”，
showOutput6:“”，
showOutput5:“”，
showOutput4:“”，
showOutput3:“”，
showOutput2:“”，
showOutput1:“”，
showInput3:“”，
showInput2:“”，
showInput1:“”，
}
},
创建（）{
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；
}
如果（this.item=='output2No'&&this.value=='Yes'）{
this.showOutput2=真；
}
else if（this.item=='output2No'&&this.value=='No'）{
this.showOutput2=假；
}
如果（this.item=='output3No'&&this.value=='Yes'）{
this.showOutput3=真；
}
else if（this.item=='output3No'&&this.value=='No'）{
this.showOutput3=假；
}
if（this.item=='output4No'&&this.value=='Yes'）{
this.showOutput4=真；
}
else if（this.item=='output4No'&&this.value=='No'）{
this.showOutput4=假；
}
if（this.item=='output5No'&&this.value=='Yes'）{
this.showOutput5=真；
}
else if（this.item=='output5No'&&this.value=='No'）{
this.showOutput5=假；
}
if（this.item=='output6No'&&this.value=='Yes'）{
this.showOutput6=真；
}
else if（this.item=='output6No'&&this.value=='No'）{
this.showOutput6=假；
}
if（this.item=='output7No'&&this.value=='Yes'）{
this.showOutput7=true；
}
else if（this.item=='output7No'&&this.value=='No'）{
this.showOutput7=假；
}
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=真；
}
else if（this.item=='input3No'&&this.value=='No'）{
this.showInput3=假；
}
}

例如，我想在第一组单选按钮上选择“是”，这样会显示一张图片，如果我单击“否”，图片就会消失，依此类推

---

最好的方法是什么？

created

方法在创建组件时只运行一次，因此在

ifBus

接收事件时不会调用if-else条件。您需要将其放入事件处理程序函数中。在这里，我将所有条件提取到一个单独的方法中：

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;
    }
  }
}

顺便说一句，您应该尽量避免许多类似的

if-else

条件。您应该创建映射并使用for循环检查条件

---

参考

非常好的建议，谢谢。只是一个问题，因为我在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;
  }
}

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;
    }
  }
}