v-for 및 사용자 정의 구성 요소로 정의되지 않은 동작

Question

우선, 끔찍한 코드를 사용하십시오. (현재 해결할 시간이 없습니다). 나는 eval이 끔찍하다는 것을 알고 있지만, 우리의 목적을 위해서 이것은 우리를 위해 쉽게 일한 유일한 것입니다.

이것은 우리가 행을 추가 및 제거하는 방법이다 :

methods: { 
    addRow: function() { 
     let lastRow = eval(`this.$parent.json${this.path}[this.$parent.json${this.path}.length - 1]`); 
     lastRow = Object.assign({}, lastRow); 
     eval(`this.$parent.json${this.path}.push(lastRow)`); 
     this.$forceUpdate(); 
    }, 
    removeRow: function(index) { 
     //eval(`this.$parent.json${this.path}.splice(index, 1)`); 
     eval(`Vue.delete(this.$parent.json${this.path}, index)`); 
     this.$forceUpdate(); 
    } 

https://jsfiddle.net/00e58as4/10/6

은 행을 추가, 문제를 다시 만들려면. 그런 다음 새 행의 텍스트를 변경하십시오. 두 번째 행부터 마지막 ​​행까지 제거하십시오. 삭제되지는 않지만 마지막 행은 어떻게 표시되는지 확인하십시오. 그러나 백엔드 데이터의 라이브 뷰 인 json-debug를 확인하면 적절한 행이 삭제 된 것을 알 수 있습니다!

왜 이런 일이 발생합니까? UI와 백엔드가 동기화되지 않는 이유는 무엇입니까?

Answer 1

v-for을 반복 할 때는 항상 key을 사용해야합니다. 이런 식으로 하나 추가해보십시오.

<div class = "well" v-for = "item, index in items" :key="item">