Vue組件更新數(shù)據(jù)v-model不生效的解決
組件更新數(shù)據(jù)v-model不生效
問題描述
在使用Vue雙向綁定(v-model)功能時,封裝子組件通過Inject功能使用了父組件中的 model 中的屬性進(jìn)行雙向綁定,此時在程序中去更新model的某個屬性的值,發(fā)現(xiàn)子組件沒有實時渲染。
原因分析
由于 JavaScript 的限制,Vue 不能檢測數(shù)組和對象的變化。盡管如此我們還是有一些辦法來回避這些限制并保證它們的響應(yīng)性。
詳見:檢測變化注意事項
## 解決方案 對于這種對象變化,我們有三種方法去解決:
方法一
使用Vue.set(object,key,value)
Vue.set(vm.obj,"sex","man")
方法二
使用this.$set(this.object,key,value)
this.$set(this.obj,"sex","man")
方法三
使用**Object.assign({},this.obj)**重新賦值
this.obj.sex = "man"; this.obj = Object.assign({},this.obj)
總結(jié):前兩種方式都是應(yīng)用了Vue內(nèi)置的set方法去觸發(fā)對象數(shù)據(jù)的檢測,第三種方式使用的Vue的特性,對跟節(jié)點下的數(shù)據(jù)變更的自動檢測。
v-model失效的問題
在父子組件中,例如iview的table組件中的slot,該函數(shù)相對比于table所在附件為父子組件,父子組件的v-model不會是雙向綁定,只是單向傳值,這是vue的機(jī)制問題,原因是不想讓子組件污染父組件的數(shù)據(jù)環(huán)境,所以使用的單向傳輸,經(jīng)過測試,使用on-change,on-blur等,均存在不同的問題,input如果使用on-change,修改數(shù)據(jù)源會導(dǎo)致輸一個字符,然后更新到v-model綁定的數(shù)據(jù)源上,然后由于數(shù)據(jù)源的更新,就會導(dǎo)致該組件的再次渲染,input將會失去焦點,使用v-blur則會導(dǎo)致點擊其他按鈕時,第一次點擊,失去input的焦點,執(zhí)行綁定的方法,第二次點擊才會生效。
解決辦法
特別的土,聲明一個新的數(shù)據(jù)源,然后使用on-change改變新的數(shù)據(jù)源,然后再特定的情況下,比如提交等時機(jī),將新的數(shù)據(jù)源賦給老的數(shù)據(jù)源,這樣就不會引起問題。
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue實現(xiàn)發(fā)送短信倒計時和重發(fā)短信功能的示例詳解
這篇文章主要給大家介紹了vue實現(xiàn)發(fā)送短信倒計時和重發(fā)短信功能的相關(guān)知識,文中通過代碼示例給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12vue如何實現(xiàn)observer和watcher源碼解析
這篇文章主要為大家詳細(xì)介紹了vue如何實現(xiàn)observer和watcher源碼的相關(guān)資料,分析vue的observe實現(xiàn)源碼,聊聊如何一步一步實現(xiàn)$watch,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-03-03vue新建項目并配置標(biāo)準(zhǔn)路由過程解析
這篇文章主要介紹了vue新建項目并配置標(biāo)準(zhǔn)路由過程解析,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-12-12