Vue.js 2-way data bind only working one way

Question

I have the following element:

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

and I have the following Vue.js app:

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

When I type something on the input, the Vue model is updated, I can see it unning this on my browser console:

vueapp.$data.selectedPost.title

Returns the value typed in the textbox. All good.

But.. when I do this:

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

The textbox does not update with the assigned value.

Why? How to make it work?

This jsfiddle shows the issue happening: https://jsfiddle.net/raphadko/3fLvfea2/

Could you create a complete script example so it is easier for us to debug? — Antony
– Antony, Commented Aug 9, 2017 at 19:28

tony19 · Accepted Answer · 2022-07-15 23:59:16Z

2

The behavior you are seeing is because Vue cannot detect properties added to objects after the Vue has been initialized unless you add them using $set. In this case, just initialize the title property.

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

Updated fiddle.

edited Jul 15, 2022 at 23:59

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Aug 9, 2017 at 19:46

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sigmaxf Over a year ago

Would that be the same for sub-sub-objects? What if title is another object? I would have to initialize all it's properties beforehand?

Bert Over a year ago

@raphadko Yes, any object you add a property to. You don't have to initialize them, but if you don't you need to use the $set method I linked.

Collectives™ on Stack Overflow

Vue.js 2-way data bind only working one way

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related