过渡组的孩子必须被锁定……但是他们被锁定了

Question

尝试在我的组件模板中使用 <animation-group> ，但出现错误：

[Vue warn]: <transition-group> children must be keyed: <div>

但我很确定它们是锁定的。

 //js

Vue.component('instruments', {
template: `
        <transition-group name="fade">
            <div class="instruments">
                <div class="instrument" v-for="(instrument, index) in filteredInstruments" v-bind:key="index">
                    <img v-bind:src="instrument.photo">
                    <span class="name">{{ instrument.name }}</span>
                    <span class="construction">{{ instrument.top }} / {{ instrument.backAndSides }}</span>
                    <span class="price">$ {{ instrument.price }}</span>
                </div>
            </div>
        </transition-group>
    `
}

我认为设置 v-bind:key="index" 会满足这一点，但我得到上面粘贴的错误。

原文由 Justin D 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您必须为 <div class="instruments"> 元素提供唯一键，因为 --- 中 <transition-group> 元素，特别是直系子元素，始终 需要具有唯一键 属性。

If you don’t want to give a key to .instruments , you can remove that element and assign a tag and class attributes to <transition-group> 相反，因为它呈现一个实际元素，默认情况下是 <span> 。

 <transition-group name="fade" tag="div" class="instruments">

这样，警告将不再出现，因为直接子级 ( .instrument ) 已分配给他们唯一的密钥。

原文由 Ana Liza Pandac 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在一些常见的情况下。

您应该检查除了 for 循环中的所有元素之外是否还有任何元素。

你可能有这样一个不正确的结构：

 <transition-group name="fade">
  <div v-for="item in listItem" :key="item.id">
  </div>
  <n-button>Load more...</n-button>
</transition-group>

n 按钮 是原因。应将 n 按钮 移出侧 过渡组

原文由 HoangYell 发布，翻译遵循 CC BY-SA 4.0 许可协议