Vue組件更新數(shù)據(jù)v-model不生效的解決
組件更新數(shù)據(jù)v-model不生效
問(wèn)題描述
在使用Vue雙向綁定(v-model)功能時(shí)，封裝子組件通過(guò)Inject功能使用了父組件中的 model 中的屬性進(jìn)行雙向綁定，此時(shí)在程序中去更新model的某個(gè)屬性的值，發(fā)現(xiàn)子組件沒(méi)有實(shí)時(shí)渲染。
原因分析
由于 JavaScript 的限制，Vue 不能檢測(cè)數(shù)組和對(duì)象的變化。盡管如此我們還是有一些辦法來(lái)回避這些限制并保證它們的響應(yīng)性。
詳見(jiàn)：檢測(cè)變化注意事項(xiàng)
## 解決方案 對(duì)于這種對(duì)象變化，我們有三種方法去解決：
方法一
使用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ā)對(duì)象數(shù)據(jù)的檢測(cè)，第三種方式使用的Vue的特性，對(duì)跟節(jié)點(diǎn)下的數(shù)據(jù)變更的自動(dòng)檢測(cè)。
v-model失效的問(wèn)題
在父子組件中，例如iview的table組件中的slot，該函數(shù)相對(duì)比于table所在附件為父子組件，父子組件的v-model不會(huì)是雙向綁定，只是單向傳值，這是vue的機(jī)制問(wèn)題，原因是不想讓子組件污染父組件的數(shù)據(jù)環(huán)境，所以使用的單向傳輸，經(jīng)過(guò)測(cè)試，使用on-change，on-blur等，均存在不同的問(wèn)題，input如果使用on-change，修改數(shù)據(jù)源會(huì)導(dǎo)致輸一個(gè)字符，然后更新到v-model綁定的數(shù)據(jù)源上，然后由于數(shù)據(jù)源的更新，就會(huì)導(dǎo)致該組件的再次渲染，input將會(huì)失去焦點(diǎn)，使用v-blur則會(huì)導(dǎo)致點(diǎn)擊其他按鈕時(shí)，第一次點(diǎn)擊，失去input的焦點(diǎn)，執(zhí)行綁定的方法，第二次點(diǎn)擊才會(huì)生效。
解決辦法
特別的土，聲明一個(gè)新的數(shù)據(jù)源，然后使用on-change改變新的數(shù)據(jù)源，然后再特定的情況下，比如提交等時(shí)機(jī)，將新的數(shù)據(jù)源賦給老的數(shù)據(jù)源，這樣就不會(huì)引起問(wèn)題。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在Vue項(xiàng)目中優(yōu)化字體文件的加載和緩存的常用方法
在現(xiàn)代 Web 開(kāi)發(fā)中,字體文件通常是頁(yè)面加載時(shí)間的重要因素之一,特別是在字體文件較大或網(wǎng)絡(luò)環(huán)境不佳的情況下,用戶體驗(yàn)可能會(huì)受到影響,本文將詳細(xì)探討如何在 Vue.js 項(xiàng)目中優(yōu)化字體文件的加載和緩存,以提高頁(yè)面性能,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了Vue.js仿微信聊天窗口展示組件功能,需要的朋友可以參考下2017-08-08
基于Vue.js 實(shí)現(xiàn)簡(jiǎn)易拖拽指令
在 Vue.js 中,我們可以通過(guò)自定義指令的方式來(lái)實(shí)現(xiàn)拖拽功能,使得代碼更加模塊化和可復(fù)用,本文將介紹如何基于 Vue.js 實(shí)現(xiàn)一個(gè)簡(jiǎn)易的拖拽指令,感興趣的朋友跟隨小編一起看看吧2024-04-04
解決vue-router進(jìn)行build無(wú)法正常顯示路由頁(yè)面的問(wèn)題
下面小編就為大家分享一篇解決vue-router進(jìn)行build無(wú)法正常顯示路由頁(yè)面的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要介紹了Vue3如何配置多級(jí)代理問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
這篇文章主要介紹了vue中的Key值重復(fù)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue?props傳入function時(shí)的this指向問(wèn)題解讀
這篇文章主要介紹了Vue?props傳入function時(shí)的this指向問(wèn)題解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
本篇文章主要介紹了Vue DevTools調(diào)試工具的使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
vue兩組件間值傳遞 $router.push實(shí)現(xiàn)方法
兩組件間傳值，可能包含多種情況，這篇文章主要介紹了vue兩組件間值傳遞 $router.push實(shí)現(xiàn)方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05
Vue3+TypeScript埋點(diǎn)方面的應(yīng)用實(shí)踐
本文詳細(xì)闡述了如何在Vue3中使用TypeScript實(shí)現(xiàn)埋點(diǎn)功能,包括全局注冊(cè)$track插件、Mixin實(shí)現(xiàn)全局埋點(diǎn)等,隨著Vue3的逐漸普及,在實(shí)際工作中采用Vue3+TypeScript實(shí)現(xiàn)埋點(diǎn)將會(huì)變得越來(lái)越流行2023-08-08