今天在写项目的时候,遇到了这样一个问题
使用的element框架中是一个单选框
<el-radio-group v-model="ruleForm.jdgPs"> <el-radio :label="1" value = "0">通过</el-radio> <el-radio :label="2" value = "1">终止</el-radio> <el-radio :label="3" value = "2">退回</el-radio> </el-radio-group> <el-form-item label="处理原因" prop="pcsgRsn" > <el-input type= "textarea" v-model="ruleForm.pcsgRsn"> <el-form-item>
要求是 单选切换时 切换到通过的时候 文本域里面的字段显示通过,切换到终止或者退回的时候,文本域文本重新为空
解决方法:
element UI 对于 单选 el-radio-group 有一个change事件,他的回调是我们选择的绑定值 则我在代码中是这么写的:
<el-radio-group @change ="changeValue"> <el-radio-group> methods:{ changeValue(value){ if(value == '1'){ this.ruleForm.pcsRsn = '通过' }else{ this.ruleForm.pcsRsn = '' } } }
问题就出现了 :
里面的value值是 1,2,3没错
但 当我切换的时候只有在切换到中止这一项的时候,文本域显示通过,而中止的value值则为二,出现了一个比较矛盾的结果,
查找了一下,我估计是因为 vue没有办法检测复杂数据类型的更新和切换,而我v-model的是一个对象里面的值 所以询问了同事
他使用解构赋值的办法的重置了一下这个对象,只在我的基础上加了一行代码,如下
methods:{
changeValue(value){
if(value == '1'){
this.ruleForm.pcsRsn = '通过'
this.ruleForm = {...this.ruleForm} //只加了这么一行代码
}else{
this.ruleForm.pcsRsn = ''
}
}
}
就使我切换选项的时候不再出现矛盾的结果而是正常显示了
浅拷贝使vue可以检测对象更新了