Vue.js双向数据仅以单向工作方式绑定

Question

我有以下元素：

<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/

Answer 1

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

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

更新了fiddle。