Vuej 어레이의 항목에서 v-model을 사용하는 경우 데이터 바인딩이 작동하지 않음

Vuej 어레이의 항목에서 v-model을 사용하는 경우 데이터 바인딩이 작동하지 않음

Vue.js에 처음.내가 여기서 어디가 잘못되고 있는지 잘 모르겠어.나는 네가 추가할 수 있는 동적 사용자 목록을 가지고 있다.나는 또한 사용자들에 대한 모델 변경으로 최근 상태를 유지하고 싶은 선택사항이 있다.그러나 사용자 정보를 변경하면 선택 항목이 업데이트되지 않는다.코드랑 피들 첨부해놨어

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/

이것은 Vue의 변화 감지 주의사항이다.Vue는 해당 개체에 아직 없는 개체에 속성을 추가할 때 탐지할 수 없음.대신 이렇게 코드를 써야 한다.

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

업데이트된 바이올린.

참조URL: https://stackoverflow.com/questions/44053261/vuejs-when-using-v-model-on-an-item-in-an-array-data-binding-is-not-working