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

Question

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 어레이가 예상대로 업데이트되지 않습니다.

내가 뭘 잘못하고 있니?

Answer 1

v-model을 사용하여 값을 조작하려고하는 반면, vue 데이터 필드에서 조작해야합니다. 예를 들어, 다음과 같은 시도 :

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>