Vue2.0 $set()的使用方法


 給data對象新增屬性,並觸發視圖更新

如下代碼,給 student對象新增 age 屬性

data () {
  return {
    student: {
    name: '',
    sex: ''
   }
  }
}

眾所周知,直接給student賦值操作,雖然可以新增屬性,但是不會觸發視圖更新

mounted () {

  this.student.age = 24

}

原因是:受 ES5 的限制,Vue.js 不能檢測到對象屬性的添加或刪除。因為 Vue.js 在初始化實例時將屬性轉為 getter/setter,所以屬性必須在 data 對象上才能讓 Vue.js 轉換它,才能讓它是響應的。

要處理這種情況,我們可以使用$set()方法,既可以新增屬性,又可以觸發視圖更新。

正確寫法:this.$set(this.data,”key”,value’)

mounted () {
  this.$set(this.student,"age", 24)
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM