스플라이스가 제대로 작동하지 않음 내 객체 목록 VueJs

스플라이스가 제대로 작동하지 않음 내 객체 목록 VueJs

개체 배열이 있지만 배열 목록에서 개체를 제거할 때 항목만 끝에서 삭제됩니다.

Html:

<div id="app">
  <table>
    <tr>
      <td><input type="text" name="test1" /></td>
      <td>
        <button class="btn" @click="addrow">add row</button>
      </td>
    </tr>
    <tr v-for="(row,index) in rows">
      <td><input type="text" name="test2" /></td>
      <td>
          <button class="btn" @click="removerows(index)">remove </button>
      </td>
    </tr>
  </table>
</div>

Js:

 new Vue({
        el: "#app",
        data: {
          counterrow:1,
            rows:[],
        },
        methods: {
            addrow:function(){
           this.rows.push({
                    id:this.counterrow
                });
          },
          removerows:function(index){
           this.rows.splice(index,1);
          },
        },
        });

스플라이스(index,1)가 올바르게 동작하지 않고 삭제 시 마지막 요소만 삭제합니다.라이브 데모 : jsfiddle

당신은 아마 무슨 일이 일어나고 있는지 모르는 것 같아요.

VueJ에는 생성된 기존 컴포넌트를 재사용할 수 있는 캐싱 방법이 있습니다.- 각 오브젝트는 렌더링 시(DOM 레벨에서) 동등하다고 간주됩니다.

VueJ가 있다.이는 아마도 최소한의 계산을 요구하고 나서 예상되는 상태를 재계산하기 때문입니다.여기에는 많은 부차적인 경우가 있습니다(때로는 로컬 상태가 재계산되지 않습니다.하는 대로 사용하세요.:key아이디매뉴얼에서 다음 항목을 참조하십시오.

Vue는 v-for로 렌더링된 요소 목록을 업데이트할 때 기본적으로 "임플레이스 패치" 전략을 사용합니다.데이터 항목의 순서가 변경된 경우 항목의 순서와 일치하도록 DOM 요소를 이동하는 대신 Vue는 각 요소에 패치를 적용하여 특정 인덱스에서 렌더링해야 하는 내용을 반영하도록 합니다.이는 Vue 1.x의 track-by="$index" 동작과 유사합니다.

이 기본 모드는 효율적이지만 목록 렌더 출력이 하위 구성요소 상태 또는 임시 DOM 상태(예: 양식 입력 값)에 의존하지 않는 경우에만 적합합니다.

Vue가 각 노드의 ID를 추적하여 기존 요소를 재사용하고 재정렬할 수 있도록 힌트를 제공하려면 각 항목에 고유한 키 특성을 제공해야 합니다.키의 이상적인 값은 각 항목의 고유 ID입니다.이 특수 특성은 1.x의 추적 기준과 대략 동일하지만 특성처럼 작동하므로 v-bind를 사용하여 동적 값에 바인딩해야 합니다.

일시적인 DOM 상태:여기에서는 사용자의 동작을 나타냅니다.

수정된 코드가 있습니다(관련 바이올린: https://jsfiddle.net/BenoitNgo/3Lrmswc5/):

HTML:

<div id="app">

<table>
<tr>
  <td><input type="text" name="test1" /></td>
  <td><button class="btn" @click="addrow">add row</button></td>
</tr>
<tr v-for="(row,index) in rows" :key="row.id">
  <td><input type="text" name="test2"/></td>
  <td><button class="btn" @click="removerows(index)" >remove </button></td>
</tr>
</table>
</div>

Javascript:

new Vue({
            el: "#app",
            data: {
              counterrow:1,
                rows:[],
            },
            methods: {
                addrow:function(){
                  this.counterrow += 1;
                  this.rows.push({
                        id:this.counterrow,
                        model: ""
                    });
              },
              removerows:function(index){
               this.rows.splice(index,1);
              },
            },
            });

이 코드에서는:

• 을 counterrow하지 않다
• 가 a a a를 .:key

★★★★★★★의 문서:key: https://vuejs.org/v2/guide/list.html#key

다음은 또 다른 jsFiddle https://jsfiddle.net/BenoitNgo/2a1u1j2b/3/ 입니다.

• v-model 추가
• 양식 아래에 데이터 표시
• 을 counterrow하지 않다
• 의 추가:key

언급URL : https://stackoverflow.com/questions/48484773/splice-not-working-properly-my-object-list-vuejs