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)