Vuejs When using v-model on an item in an array, data binding is not working

Question

New to Vue.js. Not sure where I am going wrong here. I have a dynamic list of users which you can add to. I also have a select that I want to stay recent with any model changes to the users. However, when I change the user information, the select is not being updated. I've attached the code and a Fiddle.

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<div id="app">
  <h1>Users</h1>
  <div v-for="user in users">
    User ID: <input type="text" v-model="user.id" /><br /> 
    First Name: <input type="text" v-model="user.firstName" /><br />
    Last Name: <input type="text" v-model="user.lastName" />
    <br />
  </div>
  <input type="button" value="Add User" v-on:click="addUser" />
  <br /><br />
  This select should stay synced with what is entered above<br />
  <select>
    <option v-for="user in users" v-bind:value="user.firstName">{{user.firstName}} {{user.lastName}}</option>
  </select>
</div>

JavaScript:

var app = new Vue({
    el: "#app",
    data: {
        users: [{}]
    },
    methods: {
        addUser: function() {
        this.users.push({});
      }
    }
});

Fiddle: https://jsfiddle.net/rmekuuc3/

tony19 · Accepted Answer · 2022-07-15 21:06:23Z

5

This is a change detection caveat in Vue. Vue cannot detect when you add a property to an object that wasn't already on that object. Instead, you should write your code like this.

var app = new Vue({
    el: "#app",
    data: {
      users: [{id: null, firstName: null, lastName: null}]
    },
    methods: {
      addUser: function() {
        this.users.push({id: null, firstName: null, lastName: null});
      }
    }
});

Updated fiddle.

edited Jul 15, 2022 at 21:06

tony19

140k23 gold badges281 silver badges354 bronze badges

answered May 18, 2017 at 16:35

Bert

82.6k17 gold badges205 silver badges166 bronze badges

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

Collectives™ on Stack Overflow

Vuejs When using v-model on an item in an array, data binding is not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related