Vue: [2.0.0-rc.2] v-model does not update the value of v-for iterated items.

Created on 17 Aug 2016  路  4Comments  路  Source: vuejs/vue

Vue.js version

2.0.0-rc.2

Reproduction Link

https://jsfiddle.net/6nc0cwby/2/

Steps to reproduce

Input any characters to text field.

What is Expected?

The values in the list are not updated.

What is actually happening?

The values in the list are updated.

Note

On v1.0.26, it works as expected.
https://jsfiddle.net/6nc0cwby/3/

wontfix

Most helpful comment

This is a wontfix in 2.0 (and a breaking change from 1.x).

The recommendation is obviously using an array of objects instead.

All 4 comments

Quick work around: use object instead of primitive values for v-model
https://jsfiddle.net/fnlCtrl/pm30y8rq/

By the way, using v-model on primitive values inside an array looks weird to me... and I'm really surprised that it worked in 1.0.

@fnlctrl
Thanks for filling information! Actually I think weird to use v-model to the primitive value in the array too.
But in v2.0, we can use v-model for custom components and it would be nice to bind iterated model objects directly.

<ul class="my-list">
  <li v-for="item in list">
    <item-preview :value="item"></item-preview>
    <item-edit-form v-model="item"></item-edit-form>
  </li>
</ul>

This is a wontfix in 2.0 (and a breaking change from 1.x).

The recommendation is obviously using an array of objects instead.

OK I see, thank you for your description!

Was this page helpful?
0 / 5 - 0 ratings