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值'
    }
  }
}

---

原因分析：

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

---

解决方案：

1. 第一种就是显示的声明drawerForm这个对象的属性，如：

  data () {
    return {
      drawerForm: {
         msg：""
      }
    }
  },

2. 使用vue的全局方法: this.$set(data, property, value)
   data为要修改的对象，property为要添加的属性，value就是这个属性的值

    handleEditHelloForm () {
        // 模拟编辑功能需要数据回显
        Vue.set(this.helloForm,'msg', 'hello 我是drawerForm中的msg')
    }