Question

我想用列表组构建一个动态表单，用户可以通过过渡添加，删除和重新排序它们。但是我不知道如何为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>

Answer 1

键应该是要迭代的项的唯一标识符。通常，这是项目上的id字段或该项目唯一的其他字段。如果您没有这样的功能，则可以在您的商品中添加一个字段，或者以生成唯一键的方式组合多个字段，或者只使用索引。确实取决于用例。

出于您的目的，您可能想在项目中添加索引/ id以跟踪原始订单，以便vue可以在更改顺序时正确处理过渡。

Answer 2

如果您有一个简单的数组并且每个元素没有唯一的ID，则可以使用如下所示的循环索引。

 <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">

Answer 3

我发现，如果将索引用作键，则删除键时会出错。例如，如果它期望数组具有[a，b，c]，则删除b。 c现在具有索引1的键。这使它认为b从未被删除，但它认为c被删除了，因此它通过摆脱项c而不是项b的DOM元素来呈现列表。

使用简单数组的v-for循环中的Vuejs键

3 个答案: