项目中遇到的问题 --浅拷贝

　　今天在写项目的时候,遇到了这样一个问题

　　使用的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可以检测对象更新了