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