Vue中的$set的使用實例代碼
Vue —$set
在我們使用vue進(jìn)行開發(fā)的過程中,可能會遇到一種情況:當(dāng)生成vue實例后,當(dāng)再次給數(shù)據(jù)賦值時,有時候并不會自動更新到視圖上去;
當(dāng)我們?nèi)タ磛ue文檔的時候,會發(fā)現(xiàn)有這么一句話:如果在實例創(chuàng)建之后添加新的屬性到實例上,它不會觸發(fā)視圖更新。
如下代碼,給 student對象新增 age 屬性
data () { return { student: { name: '', sex: '' } } } mounted () { // ——鉤子函數(shù),實例掛載之后 this.student.age = 24 }
原因是:受 ES5 的限制,Vue.js 不能檢測到對象屬性的添加或刪除。因為 Vue.js 在初始化實例時將屬性轉(zhuǎn)為 getter/setter,所以屬性必須在 data 對象上才能讓 Vue.js 轉(zhuǎn)換它,才能讓它是響應(yīng)的。
要處理這種情況,我們可以使用$set()方法,既可以新增屬性,又可以觸發(fā)視圖更新。
但是,值得注意的是,網(wǎng)上一些資料寫的$set()用法存在一些問題,導(dǎo)致在新接觸這個方法的時候會走一些彎路!
錯誤寫法:this.$set(key,value)
(ps: 可能是vue1.0的寫法)
mounted () { this.$set(this.student.age, 24) }
正確寫法:this.$set(this.data,”key”,value')
mounted () { this.$set(this.student,"age", 24) }
總結(jié)
以上所述是小編給大家介紹的Vue中的$set的使用,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
淺談Vue render函數(shù)在ElementUi中的應(yīng)用
今天小編就為大家分享一篇淺談Vue render函數(shù)在ElementUi中的應(yīng)用,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09element-resize-detector監(jiān)聽普通元素的實現(xiàn)示例
當(dāng)涉及到網(wǎng)頁元素的實時尺寸變化監(jiān)測時,element-resize-detector?是一個值得推薦的開源庫,本文主要介紹了element-resize-detector監(jiān)聽普通元素的實現(xiàn)示例,感興趣的可以了解一下2024-07-07在 Linux/Unix 中不重啟 Vim 而重新加載 .vimrc 文件的流程
這篇文章主要介紹了在 Linux/Unix 中不重啟 Vim 而重新加載 .vimrc 文件的流程,需要的朋友可以參考下2018-03-03基于Vue的前端界面實現(xiàn)日期時間實時顯示簡單代碼
今天在項目中有一個功能是要求顯示北京的實時時間,下面這篇文章主要給大家介紹了關(guān)于如何基于Vue的前端界面實現(xiàn)日期時間實時顯示的相關(guān)資料,需要的朋友可以參考下2024-01-01vue關(guān)于select組件綁定的值為數(shù)字類型的問題
這篇文章主要介紹了vue關(guān)于select組件綁定的值為數(shù)字類型的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09VUE中Echarts的resize事件報錯和移除windows的事件問題
這篇文章主要介紹了VUE中Echarts的resize事件報錯和移除windows的事件問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-07-07