Here is an example of my code:
<input type="text" v-model="selectedPost.title" v-bind:value="selectedPost.title">
and this is my Vue.js application:
var app = new Vue({
el: '#app',
data: {
selectedPost: {}
}
});
After typing in the input field, I can see the model being updated by checking the browser console:
app.$data.selectedPost.title
The value typed in the textbox is displayed correctly. However, when I try to manually update the value using:
app.$data.selectedPost.title = "changed";
The textbox does not reflect the assigned value. Why is this happening and how can I fix it?
You can see the issue in action in this jsfiddle link: https://jsfiddle.net/raphadko/3fLvfea2/