欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue數(shù)據(jù)雙向綁定的注意點

 更新時間：2017年06月23日 11:47:13   作者：窩代碼  
這篇文章主要為大家詳細(xì)介紹了vue數(shù)據(jù)雙向綁定的注意點，具有一定的參考價值，感興趣的小伙伴們可以參考一下

最近一個vue和element的項目中遇到了一個問題： 動態(tài)生成的對象進(jìn)行雙向綁定是失敗

直接貼代碼：

 <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就是我要將數(shù)據(jù)綁定到的對象；他初始是一個空對象；我需要在其他地方讀取然后給他添加屬性，同時給表單進(jìn)行綁定。

在這個過程中就發(fā)現(xiàn)，雙向綁定失敗了 ， 而且也沒有報錯。

我是通過obj.xxx = xxx;這種方法進(jìn)行綁定； 經(jīng)過測試發(fā)現(xiàn)雙向綁定并沒有實現(xiàn)。

解決方法：

參照 VUE官方文檔： https://cn.vuejs.org/v2/guide/reactivity.html ;

受現(xiàn)代 JavaScript 的限制（以及廢棄 Object.observe），Vue 不能檢測到對象屬性的添加或刪除。由于 Vue 會在初始化實例時對屬性執(zhí)行 getter/setter 轉(zhuǎn)化過程，所以屬性必須在 data 對象上存在才能讓 Vue 轉(zhuǎn)換它，這樣才能讓它是響應(yīng)的。例如：

var vm = new Vue({
 data:{
 a:1
 }
})
// `vm.a` 是響應(yīng)的
vm.b = 2
// `vm.b` 是非響應(yīng)的

Vue 不允許在已經(jīng)創(chuàng)建的實例上動態(tài)添加新的根級響應(yīng)式屬性(root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法將響應(yīng)屬性添加到嵌套的對象上：

Vue.set(vm.someObject, 'b', 2)

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue項目中安裝使用axios全過程

    Vue項目中安裝使用axios全過程

    這篇文章主要介紹了Vue項目中安裝使用axios全過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-10-10
  • Vue 實現(xiàn)監(jiān)聽窗口關(guān)閉事件,并在窗口關(guān)閉前發(fā)送請求

    Vue 實現(xiàn)監(jiān)聽窗口關(guān)閉事件,并在窗口關(guān)閉前發(fā)送請求

    這篇文章主要介紹了Vue 實現(xiàn)監(jiān)聽窗口關(guān)閉事件,并在窗口關(guān)閉前發(fā)送請求，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-09-09
  • vue3下watch的使用方法示例

    vue3下watch的使用方法示例

    vue3中的watch是一個組合式的API使用時需要引入,下面這篇文章主要給大家介紹了關(guān)于vue3下watch使用的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-03-03
  • Vue+tracking.js 實現(xiàn)前端人臉檢測功能

    Vue+tracking.js 實現(xiàn)前端人臉檢測功能

    這篇文章主要介紹了Vue+tracking.js 實現(xiàn)前端人臉檢測功能,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2020-04-04
  • element-ui多選表格禁用某一行不被選擇問題

    element-ui多選表格禁用某一行不被選擇問題

    這篇文章主要介紹了element-ui多選表格禁用某一行不被選擇問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • Vue-Router2.X多種路由實現(xiàn)方式總結(jié)

    Vue-Router2.X多種路由實現(xiàn)方式總結(jié)

    下面小編就為大家分享一篇Vue-Router2.X多種路由實現(xiàn)方式總結(jié)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-02-02
  • element-ui table span-method(行合并)的實現(xiàn)代碼

    element-ui table span-method(行合并)的實現(xiàn)代碼

    element-ui官網(wǎng)中關(guān)于行合并的例子是根據(jù)行號進(jìn)行合并的，這顯然不符合我們?nèi)粘ｉ_發(fā)需求，因為通常我們table中的數(shù)據(jù)都是動態(tài)生成的，非常具有實用價值，需要的朋友可以參考下
    2018-12-12
  • 深入理解Vue 的鉤子函數(shù)

    深入理解Vue 的鉤子函數(shù)

    這篇文章主要介紹了Vue 的鉤子函數(shù)，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-09-09
  • vue-router解決相同路徑跳轉(zhuǎn)報錯的問題

    vue-router解決相同路徑跳轉(zhuǎn)報錯的問題

    這篇文章主要介紹了vue-router解決相同路徑跳轉(zhuǎn)報錯的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-04-04
  • vue2.0中set添加屬性后視圖不能更新的解決辦法

    vue2.0中set添加屬性后視圖不能更新的解決辦法

    在本文里我們給大家整理了關(guān)于vue2.0中set添加屬性后視圖不能更新的解決辦法以及相關(guān)知識點，需要的朋友們學(xué)習(xí)下。
    2019-02-02

最新評論