快捷導(dǎo)航

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

更新時(shí)間：2017年06月23日 11:47:13 作者：窩代碼

這篇文章主要為大家詳細(xì)介紹了vue數(shù)據(jù)雙向綁定的注意點(diǎn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

最近一個(gè)vue和element的項(xiàng)目中遇到了一個(gè)問(wèn)題：動(dòng)態(tài)生成的對(duì)象進(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>

上面一個(gè)簡(jiǎn)單的element的表單；addClass就是我要將數(shù)據(jù)綁定到的對(duì)象；他初始是一個(gè)空對(duì)象；我需要在其他地方讀取然后給他添加屬性，同時(shí)給表單進(jìn)行綁定。

在這個(gè)過(guò)程中就發(fā)現(xiàn)，雙向綁定失敗了，而且也沒(méi)有報(bào)錯(cuò)。

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

解決方法：

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

受現(xiàn)代 JavaScript 的限制（以及廢棄 Object.observe），Vue 不能檢測(cè)到對(duì)象屬性的添加或刪除。由于 Vue 會(huì)在初始化實(shí)例時(shí)對(duì)屬性執(zhí)行 getter/setter 轉(zhuǎn)化過(guò)程，所以屬性必須在 data 對(duì)象上存在才能讓 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)建的實(shí)例上動(dòng)態(tài)添加新的根級(jí)響應(yīng)式屬性(root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法將響應(yīng)屬性添加到嵌套的對(duì)象上：

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

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

您可能感興趣的文章:

相關(guān)文章

Vue之修改數(shù)據(jù)頁(yè)面不更新的問(wèn)題
這篇文章主要介紹了Vue之修改數(shù)據(jù)頁(yè)面不更新的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-12-12
Electron 如何調(diào)用本地模塊的方法
這篇文章主要介紹了Electron 如何調(diào)用本地模塊的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-02-02
vue 2.0路由之路由嵌套示例詳解
這篇文章主要給大家介紹了vue 2.0路由之路由嵌套的相關(guān)資料，文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。
2017-05-05
Element樹(shù)形控件el-tree實(shí)現(xiàn)一鍵全選、反選功能
最近做的項(xiàng)目用到了全選全不選功能,于是就自己動(dòng)手寫(xiě)了一個(gè),這篇文章主要給大家介紹了關(guān)于Element樹(shù)形控件el-tree實(shí)現(xiàn)一鍵全選、反選功能的相關(guān)資料,需要的朋友可以參考下
2023-10-10
一文弄懂Vite 配置文件
Vite?構(gòu)建環(huán)境分為開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境,不同環(huán)境會(huì)有不同的構(gòu)建策略,本文就來(lái)介紹下Vite 配置文件,具有一定的參考價(jià)值,感興趣的可以了解一下
2024-08-08
VUE中如何調(diào)用高德地圖獲取當(dāng)前位置(VUE2.0和3.0通用)
使用uniapp開(kāi)發(fā)微信小程序時(shí),多多少少會(huì)遇到獲取當(dāng)前位置的詳細(xì)信息,下面這篇文章主要給大家介紹了關(guān)于VUE中如何調(diào)用高德地圖獲取當(dāng)前位置(VUE2.0和3.0通用)的相關(guān)資料,需要的朋友可以參考下
2023-04-04
vue3+vite中報(bào)錯(cuò)信息處理方法Error: Module “path“ has&nb
這篇文章主要介紹了vue3+vite中報(bào)錯(cuò)信息處理方法Error: Module “path“ has been externalized for browser compatibility...,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-03-03
vue.js學(xué)習(xí)之遞歸組件
最近學(xué)習(xí)vue.js有一段時(shí)間了，使用vue做了一套后臺(tái)管理系統(tǒng)，其中使用最多就是遞歸組件，也因?yàn)樽约簩?duì)官方文檔的不熟悉使得自己踩了不少坑，所以今天寫(xiě)出來(lái)和大家一起分享。有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。
2016-12-12
解決Vue 瀏覽器后退無(wú)法觸發(fā)beforeRouteLeave的問(wèn)題
這篇文章主要介紹了解決Vue 瀏覽器后退無(wú)法觸發(fā)beforeRouteLeave的問(wèn)題,需要的朋友可以參考下
2017-12-12
vue+element ui實(shí)現(xiàn)錨點(diǎn)定位
這篇文章主要為大家詳細(xì)介紹了vue+element ui實(shí)現(xiàn)錨點(diǎn)定位，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-06-06