如何在Vue中使用$set?相信很多沒有經驗的人對此束手無策,為此本文總結了問題出現(xiàn)的原因和解決方法,通過這篇文章希望你能解決這個問題。
創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網綜合服務,包含不限于成都網站制作、網站設計、安國網絡推廣、重慶小程序開發(fā)公司、安國網絡營銷、安國企業(yè)策劃、安國品牌公關、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等,從售前售中售后,我們都將竭誠為您服務,您的肯定,是我們最大的嘉獎;創(chuàng)新互聯(lián)為所有大學生創(chuàng)業(yè)者提供安國建站搭建服務,24小時服務熱線:18982081108,官方網址:www.cdcxhl.com
Vue —$set
在我們使用vue進行開發(fā)的過程中,可能會遇到一種情況:當生成vue實例后,當再次給數(shù)據(jù)賦值時,有時候并不會自動更新到視圖上去;
當我們去看vue文檔的時候,會發(fā)現(xiàn)有這么一句話:如果在實例創(chuàng)建之后添加新的屬性到實例上,它不會觸發(fā)視圖更新。
如下代碼,給 student對象新增 age 屬性
data () { return { student: { name: '', sex: '' } } } mounted () { // ——鉤子函數(shù),實例掛載之后 this.student.age = 24 }
原因是:受 ES5 的限制,Vue.js 不能檢測到對象屬性的添加或刪除。因為 Vue.js 在初始化實例時將屬性轉為 getter/setter,所以屬性必須在 data 對象上才能讓 Vue.js 轉換它,才能讓它是響應的。
要處理這種情況,我們可以使用$set()方法,既可以新增屬性,又可以觸發(fā)視圖更新。
但是,值得注意的是,網上一些資料寫的$set()用法存在一些問題,導致在新接觸這個方法的時候會走一些彎路!
錯誤寫法: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) }
看完上述內容,你們掌握如何在Vue中使用$set的方法了嗎?如果還想學到更多技能或想了解更多相關內容,歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!