1.问题复现如下:
<el-select v-model="item.question_type" placeholder="请选择" @change="txChangeFn(index,item.question_type)">
<el-option
v-for="item in txList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
//题型变更
txChangeFn(index,params){
this.wenjuan.wtlist[index].question_type=params
if(this.wenjuan.wtlist[index].question_type=='dan'){
this.wenjuan.wtlist[index]={
"question_text": "", //问题
"question_type": "dan", // 'dan'单选, 'duo'多选, 'text'文本
"required": "Y", // 是否必答
"xxlist": [
{
option_text: ""
},
{
option_text: ""
},
{
option_text: ""
},
{
option_text: ""
}
] //选项list 对于文本题,此数组可以为空或省略
}
}else if(this.wenjuan.wtlist[index].question_type=='duo'){
this.wenjuan.wtlist[index]={
"question_text": "", //问题
"question_type": "duo", // 'dan'单选, 'duo'多选, 'text'文本
"required": "Y", // 是否必答
"xxlist": [
{
"option_text": ""
},
{
"option_text": ""
},
{
"option_text": ""
},
{
"option_text": ""
}
]
}
}else if(this.wenjuan.wtlist[index].question_type=='text'){
this.wenjuan.wtlist[index]={
"question_text": "",
"question_type": "text",
"required": "Y",
// 无选项
}
}
}
问题出现:在<el-select>
组件中使用@change
事件只触发了一次,可能是因为在选择项变化后,v-model
的值没有发生实际变化,导致@change
事件没有再次触发。
解决办法:检查一下在txChangeFn(index, item.question_type)
方法中是否有修改item.question_type
的逻辑,确保每次选择项变化后v-model
的值都有实际变化。另外,还可以尝试在txChangeFn
方法中手动将item.question_type
设置为一个新的值,以确保@change
事件能够再次触发。
2.修改后的值
txChangeFn(index, params) {
this.wenjuan.wtlist[index].question_type = params;
if (params === 'dan') {
this.wenjuan.wtlist[index].xxlist = [
{ option_text: "" },
{ option_text: "" },
{ option_text: "" },
{ option_text: "" }
];
} else if (params === 'duo') {
this.wenjuan.wtlist[index].xxlist = [
{ option_text: "" },
{ option_text: "" },
{ option_text: "" },
{ option_text: "" }
];
} else if (params === 'text') {
// 无需修改xxlist
}
}
修改this.wenjuan.wtlist[index].question_type
后,直接修改该对象的属性而不是重新赋值整个对象,既可以不影响响应式。