Блог

Я хочу создать динамическую форму с группами списков, и пользователь может добавлять, удалять и изменять их порядок с переходом. Но я не знаю, как установить ключ для каждого элемента внутри цикла v-for. Как говорится в документе, использовать объект в качестве ключа — плохая идея, или использовать индекс так же, как вообще не использовать ключ. Кто-нибудь может показать мне хорошее решение для этого.

 <div id="root">     
    <transition-group name="flip-list" tag="div">
        <div class="form-group" v-for="(item, index) in items" :key="what key to use">              
            <input type="text" name="name" v-model="item.name">
            <input type="tel" name="tel" v-model="item.tel">
        </div>
    </transition-group>
    <button @click="add_item">Add</button>      
</div>

<script>
     new Vue({
        el: '#root',
        data: {
            items: []               
        },
        methods: {
            add_item: function () {
                this.items.push({
                    name: '',
                    tel: ''
                })
            }
        }           
    })
</script>
  

Ключ должен быть уникальным идентификатором для элементов, по которым вы выполняете итерацию. Обычно это id поле элемента или какое-либо другое поле, уникальное для этого элемента. Если у вас нет ничего подобного, я бы либо добавил поле к вашим элементам, либо объединил несколько полей таким образом, чтобы сгенерировать уникальный ключ, либо просто использовал индекс. Это действительно зависит от варианта использования.

Для вашей цели вы, вероятно, захотите добавить индекс / идентификатор к своим элементам для отслеживания исходного порядка, чтобы vue мог правильно обрабатывать переходы при изменении этого порядка.

Если у вас простой массив и у вас нет уникальных идентификаторов для каждого элемента, вы можете использовать индекс цикла, как показано ниже.

  <div class="form-group" v-for="(item, index) in items" key="index">
  

Но всегда предпочтительнее добавлять уникальный индекс к каждому из ваших элементов в массиве и использовать его в качестве ключа, как показано ниже.

 <div class="form-group" v-for="(item, index) in items" :key="item.id">
  

Я обнаружил, что если вы используете индекс в качестве ключа, вы будете получать ошибки при удалении ключей. Например, если ожидается, что массив будет содержать [a, b, c], то вы удаляете b. c теперь имеет ключ с индексом 1. Это заставляет его думать, что b никогда не удалялся, но он считает, что c был удален, поэтому он отображает список, избавляясь от элементов DOM для элемента c вместо элемента b.