vue2 배열에 변경 요소를 추가하고 관찰하는 방법

Question

입력 내용에 유형을 지정하여 변경할 수 없습니다. 입력을 관찰하여 어린이에게 영향을주는 방법. 하고 이름이 각 자녀에 대한

JS가 있는지 확인합니다

 $(function() { 
     var person = { 
      name: '', 
      children: ['Please enter a name'] 
     } 

     var vm = new Vue({ 
      el: "#example", 
      data: person, 
      methods: { 
       addChild: function (index) { 
        this.children.splice(index+1, 0, ""); // 
       }, 
       removeChild: function (index) { 
        this.children.splice(index , 1) 
       }, 
       getData: function() { 
        console.log(this.children); 
       } 
      }  
     }) 

    }) 

html로 부분 :

<ul > 
    <li v-for="(child,index) in children"> 
     the child at <span>{{ index }}</span> is <span >{{ child }}</span> 
     <input v-model = "child"> 
     <button @click="addChild(index)">newChild</button> 
     <button v-on:click="removeChild(index)">X</button> 

    </li> 
</ul> 
    <button v-on:click="getData">watch data</button> 
    <div>{{ $data | json }} </div> 

</div> 

Answer 1

$index이 been deprecated in Vue 2.x 있습니다. 대신 v-for 지침의 일환으로 인덱스에 변수를 할당 할 수

<li v-for="(child,index) in person.children"> 
    the child at <span>{{ index }}</span> is <span >{{ child }}</span> 
    <input v-model = "person.children[index]"> 
    <button @click="addChild(index)">newChild</button> 
    <button v-on:click="removeChild(index)">X</button> 
</li> 

이 좋아

업데이트, 난 당신이 지금 무슨 일을하는지 참조하십시오. 바인드 할 오브젝트의 표현식에 v-model을 설정할 수 있습니다. 귀하의 경우 특정 색인의 하위 요소이므로 input의 v-model 바인딩을 person.children[index]으로 어떻게 변경했는지 확인하십시오.

또한 data 옵션을 단일 person 속성이있는 개체로 변경했습니다. 이것은 배열 작업에 대한 바인딩을 만들었습니다.

여기는 complete working jsFiddle입니다.