Vue.js 2-Wege-Daten binden arbeiten nur einen Weg

Question

Ich habe folgendes Element:

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

und ich habe folgendes Vue.js App:

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

Wenn ich etwas auf Typ der Eingang wird das Vue Modell aktualisiert, kann ich sehen, es unning dies in meiner Browser-Konsole:

vueapp.$data.selectedPost.title 

den Wert in dem Textfeld eingegeben zurück. Alles gut.

Aber .. wenn ich dies tun:

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

Die Textbox aktualisiert nicht mit dem zugewiesenen Wert.

Warum? Wie funktioniert es?

Diese jsfiddle zeigt das Problem passiert: https://jsfiddle.net/raphadko/3fLvfea2/

Answer 1

Das Verhalten, das Sie sehen, ist, weil Vue cannot detect Eigenschaften zu Objekten hinzugefügt nach der Vue initialisiert wurde, wenn Sie sie $set mit hinzufügen. Initialisieren Sie in diesem Fall einfach die Titeleigenschaft.

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

Aktualisiert fiddle.