Vue v-model not updating array values while using v-for

Question

I'm new to Vue, and am playing around with v-model to see what I can create. I want to make an editable array of names. Here is my code so far:

var app = new Vue({
  el: '#app',
  data: {
    names: ['Josh', 'Tom']
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>

<div id="app">
  Editable list:
  <ul>
    <li v-for="name in names"><input type="text" v-model="name"></li>
  </ul>
  {{ names }}
</div>

When this is run, the inputs show up, and each one contains the correct value. However, typing in the inputs doesn't update the names array as I would have expected.

What am I doing wrong?

B. Fleming · Accepted Answer · 2017-12-17 05:25:17Z

9

You're trying to use v-model to operate on a value, whereas you need to operate on a vue data field. For example, try the following:

var app = new Vue({
  el: '#app',
  data: {
    people: [{name: 'Josh'}, {name: 'Tom'}]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>

<div id="app">
  Editable list:
  <ul>
    <li v-for="person in people"><input type="text" v-model="person.name"></li>
  </ul>
  {{ people }}
</div>

Alternatively, you could do:

var app = new Vue({
  el: '#app',
  data: {
    names: ['Josh', 'Tom']
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>

<div id="app">
  Editable list:
  <ul>
    <li v-for="(name, index) in names"><input type="text" v-model="names[index]"></li>
  </ul>
  {{ names }}
</div>

answered Dec 17, 2017 at 5:25

B. Fleming

7,2601 gold badge22 silver badges37 bronze badges

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

2 Comments

PullJosh Over a year ago

This is fascinating! Thanks for the help. Never would have figured that one out on my own.

B. Fleming Over a year ago

No problem! Good luck with your learning endeavors. Vue, and other MVVM frameworks, can be absolutely wonderful to work with. Just be careful about some of the common gotchas and be sure to scour the documentation. List/object change detection caveats should be another subject to look into ASAP!

Collectives™ on Stack Overflow

Vue v-model not updating array values while using v-for

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