Vuejs Bei Verwendung von v-model für ein Element in einem Array funktioniert die Datenbindung nicht

Question

Neu bei Vue.js. Ich bin mir nicht sicher, wo ich hier falsch liege. Ich habe eine dynamische Liste von Benutzern, denen Sie hinzufügen können. Ich habe auch eine Auswahl, die ich mit allen Modelländerungen für die Benutzer aktuell bleiben möchte. Wenn ich jedoch die Benutzerinformationen ändere, wird die Auswahl nicht aktualisiert. Ich habe den Code und eine Geige beigefügt.

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/

Answer 1

Dies ist ein change detection caveat in Vue. Vue kann nicht erkennen, wenn Sie einem Objekt eine Eigenschaft hinzufügen, die sich noch nicht auf diesem Objekt befindet. Stattdessen sollten Sie Ihren Code so schreiben.

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}); 
     } 
    } 
}); 

Aktualisiert fiddle.