VUE JS 2路數據綁定更新不及時

Question

，所以我有一個快速的Vue公司JS的問題，這似乎很奇怪，我有以下

var home = new Vue({ 
el: '#home', 
data:{ 
    title: 'welcome to the app' 
} 
}); 

的正常工作，在我的HTML標題得到更新精...

現在，當我做到這一點

home.$data.title = 'this is the new title' 

的HTML

<div class="app-topbar">{{title | uppercase}}</div> 

不更新，我必須強制更新數據綁定或其他？

感謝薩姆

Answer 1

你不需要home.$data.title，如果你對你的Vue的實例中，你可以簡單地通過使用this.title更改標題值。

這是一個快速小提琴。

http://jsfiddle.net/stefkosmo/6x2v9y20/

Answer 2

這工作對我很好。只需設置home.title，像這樣： http://jsfiddle.net/6x2v9y20/1/

也許您正在嘗試訪問home.title Vue項目創建之前？

Answer 3

當你想更新一個實例的數據，該記錄方法是通過this.$set('title', 'this is the new title); 設置新的數據時，你這樣做，實際上是什麼框架呢，是重新執行你的模板和HTML更新

http://vuejs.org/api/instance-methods.html#vm- \ $設置（_keypath \，值）

Answer 4

對於仍在搜索此問題的人，此問題可能是由警告引起的。

在實例中更新數據並強制事件的最佳方法是使用Vue.set。

按照鏈接：https://vuejs.org/v2/guide/list.html#Caveats

Answer 5

在萬不得已我也用Vue.forceUpdate()`。

但確實在這裏看起來像你應該簡單地使用home.title。

---

我的清單對於這類問題：

• 計算的財產？
• this.$set
• 提防的箭頭功能和lodash
• 與成分：.sync