我有一个带有扩展面板和单选按钮的组件。和带有一堆图片的另一个组件。我的目标是根据选择的单选按钮显示还是不显示图片。
我已经写了一个代码，但是没有用：
这是带有单选按钮（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>
这是我的图片组件（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;
}
}
例如，我想再次在第一组单选按钮上选择“是”，然后选择其中一张图片 show ，如果我单击否，则图片消失，依此类推。
最好的方法是什么？
答案 0 :(得分：1)
created方法仅在创建组件时运行一次，因此ifBus接收事件时不会调用您的if条件。您需要将其放在事件处理函数中。在这里，我将所有条件提取到一个单独的方法中：
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循环检查条件。