解决vue中v-model双向绑定失败,表单数据不能回显的问题

在vue中使用v-model="columns[i].value"v-model="column[value]"进行双向绑定时或者在绑定事件中使用赋值形式改变绑定变量的值如:

handleChange(value){
switch (value){
          case 1:this.Model.value=600;this.Model.Precision=0;break;
          case 2:this.Model.value=10;this.Model.Precision=0;break;
          case 3:this.Model.value=10;this.Model.Precision=10;break;
          case 4:this.Model.value=1;this.Model.Precision=0;break;
          case 5:this.Model.value=0;this.Model.Precision=0;break;
        }
      }

可能会导致v-model双向绑定出错,数据错误显示但绑定变量数据正确。
这时可以使用this.$set(对象,属性,值)方法给v-model绑定的变量重新赋值,可以解决这个问题。具体使用方法如下:

<a-input v-model="Model.value" @change="onChange"/>
//此处的Model.value双向绑定存在问题,使用onchange方法修复

修复方法:

onChange(e){
        this.$set(this.Model, this.Model.value, e)
      },
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐