Vue.v-for에서 항목 인덱스를 키 속성으로 설정할 수 있습니까

디렉토리를 사용하면 데이터의 여러 항목이 페이지 요소로 삽입됩니다.이때v-for가 주는 것은'스타일 가이드에 규정된'필수'의 규칙('('밴드 키 v-for이다.

고유 키 특수 속성 및 인덱스

키 특수 속성 요소에 고유한 값을 제공합니다.key는 :key의 생략 문법("key 참조)이다.

<ul>
    <li v-for="item in items" :key="item.id">...</li>
</ul>

또한 진열v-bind:key에서 데이터를 추출할 때 두 번째 파라미터에서 그룹 인덱스를 수신할 수 있다("v-for로 원소를 그룹에 비추기"참조).색인은 당연히 유일하다.

<ul id="example">
    <li v-for="(item, index) in items">
        {{parentMessage}} - {{index}} - {{item.message}}
    </li>
</ul>

그럼 v-for로 배열 색인을 얻어서 v-for에게 주면 되잖아요.결론적으로 볼 때, 수조 인덱스는 key의 값이 되어서는 안 된다.
주지 않으면key, 설명은배열 색인 사용이다.
또 요소를 추가하거나 삭제하거나 순서를 변경하지 않았을 때에만 한정된다면 사용하지 않아도 된다key.차라리'높은 표준 모드 효율'이다.다만, 이후에는 변덕스러운 전제로 여겨질 수 있기 때문에 key'필수'가 아닌가 추정된다.

색인을 키로 하면 원소의 애니메이션은 예상치 못한 동작이 된다

key에서 얻은 그룹 인덱스v-for의 값을 부여할 때 요소 애니메이션은 무의식적인 동작이 될 수 있습니다."Vue.동적으로 수정할 요소에 애니메이션 추가"에서 제작된 Todo 목록은 항목을 추가하거나 제거할 때 수평 애니메이션(견본 001)을 사용합니다.

샘플001 ■ Vue.js + ES6: TodoMVC with animation

See the Pen Vue.js + ES6: TodoMVC with animation by Fumio Nonaka ( @FumioNonaka )
on CodePen .

<li v-for="todo in filteredTodos"

    :key="todo.id"
    >

</li>

에서 데이터를 읽기 시작할 때 (todoStarge.fetch (), 그룹 인덱스를 항목 key 에 부여하고, 그룹 길이를 다시 추가하는 항목의 값 (todoStarge.uid) 으로 합니다.그런 다음 항목(addTodo()을 추가할 때마다 숫자 값을 추가합니다.key의 값은 고유하며 표시된 항목의 값은 변경되지 않습니다.

const todoStorage = {
    fetch() {

        todos.forEach((todo, index) =>
            todo.id = index
        );
        todoStorage.uid = todos.length;
        return todos;
    },

};

const app = new Vue({

    methods: {
        addTodo() {

            this.todos.push({
                id: todoStorage.uid++,
                title: value,

            });

        },

    },

});

이 템플릿을 다음과 같은 내용으로 바꾸어 그룹 인덱스key의 값(샘플 002)으로 만듭니다.

<li v-for="(todo, index) in filteredTodos"

    :key="index"
    >

</li>

샘플002 ■ Vue.js + ES6: Setting the index of item to its :key

See the Pen Vue.js + ES6: Setting the index of item to its :key by Fumio Nonaka ( @FumioNonaka )
on CodePen .

그럼, 이게 어떻게 된 일입니까?애니메이션은 삭제할 항목에 관계없이 마지막 항목이 됩니다.

図001■どの項目を削除しても最後の項目がアニメーションする

첫 번째 항목 삭제

마지막 항목 애니메이션

keyは振り直してはいけない

유일한 key는 Vue의 데이터 변화를 추적하는 데 사용됩니다.그러나 색인 배열을 사용했다면 앞의 요소를 빼면 뒤의 번호는 반드시 붙여야 한다.이렇게 되면 Vue는 어떤 요소의 데이터가 바뀌었는지 추적할 수 없게 된다.다시 일으킬 수 없다는 뜻keyp>
그럼에도 불구하고 데이터 삭제 자체는 옳다.그러나 애니메이션이 요구되면 요소를 바로 제거할 수 없다.배열 색인을 사용하는 경우 Vue는 데이터와의 상관 관계를 보지 않고 마지막 요소를 삭제합니다("("キー付き v-for의 "자세한 설명"참조).따라서 통상적으로 마지막 요소는 애니메이션이다.물론 데이터가 정확하게 삭제되었기 때문에 새로운 인덱스에 따라 원소의 데이터와key를 재분배한 것은 상기 견본 002의 운동이라고 볼 수 있다(그림001).p>

For example, let's say the first item in the array is removed. if you use an index, Vue will assume the last element was removed and update every remaining element as it shifts everything down, thinking they've all changed.

("("Style Guide: Keyed v-for (question)"에서)

예를 들어 그룹의 첫 번째 항목이 취소되었다고 가정합니다.색인을 사용하면 Vue는 마지막 요소가 삭제된 것으로 간주하고 나머지 배열 데이터로 순서대로 요소를 업데이트하며 모든 요소가 수정됩니다.(작자역)

상기 견본001은 원시 데이터의 배열 길이를 다음key의 값으로 설정하고 항목을 추가할 때 가산합니다.독특한 가치도 있고 변하지 않는 가치도 있다.다만, 화면에key 값을 표시하고 추가·삭제를 반복하면 번호 열기가 커지는 데 신경 쓸 수 있다.이 경우 追加と削除が繰り返される配列要素のオブジェクトに一意のid番号を振る을(를) 읽으십시오.

[추기: 2019년 09월 03일] 관련 문제를 비망록으로 보충한다.데이터가 비어 있을 때 key 속성 값을 복원하고 새로운 요소를 추가합니다. 이전 데이터는 사라지지 않았습니다.재설정된 속성 값length이 이전에 삭제된 요소와 중복되기 때문입니다.일련의 프로세스에서 삭제하고 추가할 때, 삭제하기 전에 중복되지 않는 key 속성 값을 확인하여 피할 수 있다p>

[추기: 2019년 11월 03일]'키는 다시 일으킬 수 없다'는 설명을 일부 수정 및 보충p>

Reference

이 문제에 관하여(Vue.v-for에서 항목 인덱스를 키 속성으로 설정할 수 있습니까), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/FumioNonaka/items/d1d9c9335116426a8316

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)