vue中數據雙向綁定註意點
阿新 • • 發佈:2017-06-23
一個 生成 16px property logs 然而 activit 限制 for 就是我要將數據綁定到的對象;他初始是一個空對象;我需要在其他地方讀取然後給他添加屬性,同時給表單進行綁定。
對象上存在才能讓 Vue 轉換它,這樣才能讓它是響應的。例如:
最近一個vue和element的項目中遇到了一個問題: 動態生成的對象進行雙向綁定是失敗
直接貼代碼:
<el-form :model="addClass" :rules="rules" ref="addClass"> <el-form-item label="表單分類名稱" prop="NAME" :label-width="formLabelWidth"> <el-input v-model="addClass.NAME" auto-complete="off"></el-input> </el-form-item> <el-form-item label="表單分類描述" prop="DESCRIBE" :label-width="formLabelWidth"> <el-input type="textarea" autosize row=5 v-model="addClass.DESCRIBE" auto-complete="off"></el-input> </el-form-item> </el-form>
上面一個簡單的element的表單;addClass
在這個過程中就發現,雙向綁定失敗了 , 而且也沒有報錯。
我是通過 obj.xxx = xxx;這種方法進行綁定; 經過測試發現雙向綁定並沒有實現。
解決方法:
參照 VUE官方文檔: https://cn.vuejs.org/v2/guide/reactivity.html ;
受現代 JavaScript 的限制(以及廢棄 Object.observe
),Vue 不能檢測到對象屬性的添加或刪除。由於 Vue 會在初始化實例時對屬性執行 getter/setter
轉化過程,所以屬性必須在 data
var vm = new Vue({
data:{
a:1
}
})
// `vm.a` 是響應的
vm.b = 2
// `vm.b` 是非響應的
Vue 不允許在已經創建的實例上動態添加新的根級響應式屬性(root-level reactive property)。然而它可以使用 Vue.set(object, key, value)
方法將響應屬性添加到嵌套的對象上:
Vue.set(vm.someObject, ‘b‘, 2)
vue中數據雙向綁定註意點