Vue中input被赋值后,无法再修改编辑的问题及解决

​项目场景：前端实现查看编辑功能的时候会出现， input框赋值后input框不能进行编辑,编辑之后自动取消，验证无法进行取消

​​​​​

问题描述:

数据代码：

<el-textarea
                  v-model="drawerForm.msg"
                  placeholder="请输入功能描述"
                  :rows="3"
                  allowClear
                ></el-textarea>      

js：

export default {
  name: 'drawerForm',
  data () {
    return {
      drawerForm: {}
    }
  },
  methods: {
    handleEditHelloForm () {
        // 模拟编辑功能需要数据回显
        this.helloForm.msg = 'hello 我是drawerForm中的msg值'
    }
  }
}      

原因分析

• 空input框进行赋值后,不存在setter和getter方法,导致无法实现双向绑定
• 由此Vue实例创建时，drawerForm.属性名并未声明，因此Vue就无法对属性执行 getter/setter 转化过程，导致drawerForm属性不是响应式的，因此无法触发视图更新。

解决方案：

使用vue的全局方法: this.$set(data, property, value)