Vue.js 2路數據綁定唯一的工作的一種方式

Question

我有以下元素：

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

，我有以下Vue.js應用：

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

當我輸入的東西上輸入時，Vue的模型更新，我可以看到它unning這我的瀏覽器控制檯上：

vueapp.$data.selectedPost.title 

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

但是..當我這樣做：

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

文本框不與指定的值更新。

爲什麼？如何使它工作？

此的jsfiddle顯示發生的問題：https://jsfiddle.net/raphadko/3fLvfea2/

Answer 1

您所看到的行爲是因爲Vue cannot detect屬性添加到對象後，除非你將它們添加使用$set的Vue公司已初始化。在這種情況下，只需初始化標題屬性。

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

更新fiddle。