Vuejs 2가 어레이에서 이동하는 항목, 어레이 인덱싱 유지 안 함

Vuejs 2가 어레이에서 이동하는 항목, 어레이 인덱싱 유지 안 함

반응형 데이터 소스로 vue 구성 요소에 공급하는 요소 어레이가 있음(vue chrome 확장을 사용하여 데이터를 검사하는 중):

the view: [A,B,C,D,E]
the data: [A,B,C,D,E]

항목(D)을 (B 이전) 새 위치로 옮기고 싶으므로 먼저 다음 구성 요소를 제거한다.splice, 그런 다음 원하는 인덱스에 다시 삽입하십시오.

the view: [A,D,B,C,E]   
the data: [A,B,C,D,E]

두 번째 구성 요소 위에 있는 Chrome Vue 검사기에서 마우스를 놓으면 세 번째 열이 강조 표시되며,데이터의 세 번째 요소 위에 마우스를 놓으면 보기에서 네 번째 요소가 강조 표시되는 등의 작업이 수행된다.

보기가 올바르게 업데이트되지만 데이터 기반이 이를 따르도록 하십시오.배열에서 원소는 객체다.

참고 자료로 전달돼서 그런가?

찾은 것 같아, 스플라이스 대신 사용해야겠어.set그리고removevue 인스턴스: https://vuejs.org/v2/api/#Vue 집합

데이터 바인딩된 배열의 요소를 인덱스로 직접 설정하지 마십시오. 이러한 변경 사항은 Vue.js에 의해 선택되지 않기 때문이다.대신, 증강된 $set() 방법을 사용하십시오.

나도 같은 문제가 있었는데, 무슨 일이 일어났냐면 나는 독특한 것을 사용하지 않았어.key어레이의 각 vue 개체에 대한 값.배열의 색인을 키로 삼았다.그래서 아이템을 이용할 때, 키들이 교환되었기 때문에 일부 데이터는 다른 아이템에 바인딩될 수 있었다.

내가 사용한 것은 a이었다.Date.now()각 키에 대해 설정할 UUID를 초기화하는 기능

---

예를 들어, 어레이의 인덱스에 키를 설정했다고 가정해 보십시오.

[ 0, 1, 2, 3, 4] - The keys
[A0,B0,C0,D0,E0] - The array of objects
[A1,B1,C1,D1,E1] - The data attribute inside each of the objects in array

그래서 [A0]은 [0]의 키와 [A1]의 데이터 속성을 가지고 있다.[A0]과 [B0]을(를) 교환한다고 가정하십시오.

[ 0, 1, 2, 3, 4] - the key
[B0,A0,C0,D0,E0] - the array of objects
[A1,B1,C1,D1,E1] - the data attribute assigned to each object in array

[B1]은 [1]의 키에 바인딩되고 A[0] 키는 [1]의 키에 바인딩되기 때문에 [A0]은 [B1]의 데이터 속성에 바인딩된다.

이것은 결코 당신이 원하는 것이 아니기 때문에 당신은 대신 각각의 키를 독특하게 만들고 싶어한다.이 작업을 수행하는 일반적인 방법은Date.now()데이터 초기화 시 방법 또는 생성 시UUID

---

요약

vue 메서드를 사용할 때 각 개체에 대해 고유한 UUID를 생성하는 Vue의 예

    methods: {
      _addGroup: function() {
        let result = {
          sortId: this.wizardGroups.length + 1,
          text: 'Hello world'
          uuid: Date.now(),
        };
        this.wizardGroups.push(result);
      }

다음 시간 동안 키에 해당 값 할당v-for반복

<child-component
  v-for="wizardGroup in wizardGroups"
  :key="wizardGroup.uuid">
</child-component>

참조URL: https://stackoverflow.com/questions/41248696/vuejs-2-moving-items-in-array-doesnt-retain-array-indexing