vue修改數據頁面無效的解決方案
vue修改數據頁面無效
項目開發的過程中,經常會遇到這種情況:為data中的某一個對象添加一個屬性。
如下案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <button @click="addAttribute()">添加屬性方法</button> <p>student屬性顯示在下面</p> <ul> <li v-for="item in student">{{item}}</li> </ul> </div> <script src="./js/vue.js"></script> <script> new Vue({ el: '#app', data: { student: { name: 'zdx' } }, methods: { addAttribute() { this.student.age = 18; //為student對象添加屬性 console.log(this.student); } } }) </script> </body> </html>
原因是由於受JavaScript的限制,vue.js不能監聽對象屬性的添加和刪除,因為在vue組件初始化的過程中,會調用getter和setter方法,所以該屬性必須是存在在data中,視圖層才會響應該數據的變化,針對這個問題
有兩種解決方案
1.this.$set(obj, key, value) 或 vue.set(obj, key, value)
methods: { addAttribute() { // this.student.age = 18; this.$set(this.student, 'age', 18); console.log(this.student); } }
2.Object.assign(target, sources)
methods: { addAttribute() { // this.student.age = 18; // this.$set(this.student, 'age', 18); this.student.age = 18; this.student = Object.assign({}, this.student); console.log(this.student); } }
更改數據後頁面不刷新的問題
今天遇到的,通過v-if控制標簽切換效果,出現沒任何反應的情況。檢測數據正常,隻是頁面沒有渲染。
查瞭很多資料因為數據層次太多,render函數沒有自動更新,需手動強制刷新。
通過
this.$forceUpdate();
強制刷新即可
以上為個人經驗,希望能給大傢一個參考,也希望大傢多多支持WalkonNet。