CODEWITHSUNDEEP
javascriptmvvmdata-bindingvue.js
abidon
abidon

Reputation: 456

MVVM binding with Vue.js does not work as expected

I'm currently making a dynamic-sized editable list component in a form.

I have at least one input field shown which is responsible for the creation of new fields as you type. If you type anything else than a whitespace character, the value of this field is added to the model and then reseted.

On the next tick, Vue updates the view and create the new input field with the letter you typed in, and I give the focus to this field so the user can continue typing as-if nothing happened for him.

So when the field is created, the model gets a new item which has the letter you typed in as its value. The problem is that when you edit the created field, the model isn't updated.

I made a JSFiddle so you can check it by yourself

itemBlured: function (idx) {
    console.log(vm.songs[idx].name); // Always print the same letter for a given field
}

The final goal of the itemBlured method is to remove the last edited entry in the model if its value is empty. But for now you can see, by opening your dev console that even if you change the value of a field, the Vue model isn't updated.

Any help or idea is welcome :)

Upvotes: 0

Views: 338

Answers (1)

abidon
abidon

Reputation: 456

I found the reason why the binding did not occured.

When dealing with <input> tags, you must use the v-model attribute instead of value to tell Vue.js to bind the input to your model, otherwise it just act as mustache template.

Hope it helps someone one day.

Upvotes: 1

Related Questions