v-for를 사용하는 동안 Vue v-model이 어레이 값을 업데이트하지 않음

v-for를 사용하는 동안 Vue v-model이 어레이 값을 업데이트하지 않음

저는 Vue에 처음 와서 Vue를 가지고 놀아요.v-model내가 뭘 만들 수 있는지 보려고요편집 가능한 이름 배열을 만들고 싶습니다.지금까지의 코드는 다음과 같습니다.

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>

이 작업을 실행하면 입력이 표시되고 각 입력에 올바른 값이 포함됩니다.단, 입력을 입력해도 다음 정보가 갱신되는 것은 아닙니다.names예상대로 배열합니다.

내가 뭘 잘못하고 있지?

사용하려고 합니다.v-modelvue 데이터 필드에서 작업을 수행해야 하는 반면 값에 대해 작업을 수행해야 합니다.예를 들어, 다음을 시도해 보십시오.

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>

또는 다음을 수행할 수 있습니다.

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>

언급URL : https://stackoverflow.com/questions/47852408/vue-v-model-not-updating-array-values-while-using-v-for