Vue.js 2-way 数据绑定仅以一种方式工作答案

【问题标题】：Vue.js 2-way data bind only working one wayVue.js 2-way 数据绑定仅以一种方式工作
【发布时间】：2017-08-10 03:46:49
【问题描述】：

我有以下元素：

<input type="text" v-model="selectedPost.title" v-bind:value="selectedPost.title">

我有以下 Vue.js 应用程序：

var vueapp = new Vue({
  el: '#app',
  data: { 
          selectedPost: {} 
        }
});

当我在输入中输入内容时，Vue 模型会更新，我可以在浏览器控制台上看到它：

vueapp.$data.selectedPost.title

返回在文本框中键入的值。都很好。

但是..当我这样做时：

vueapp.$data.selectedPost.title = "changed";

文本框不会使用分配的值进行更新。

为什么？如何让它发挥作用？

这个 jsfiddle 显示了正在发生的问题：https://jsfiddle.net/raphadko/3fLvfea2/

【问题讨论】：

【解决方案1】：

您看到的行为是因为 Vue cannot detect 属性添加到对象之后 Vue 已经初始化，除非您使用 $set 添加它们。在这种情况下，只需初始化 title 属性即可。

var vueapp = new Vue({
  el: '#app',
  data: { 
          selectedPost: {title:''} 
        }
});

更新fiddle。

【讨论】：