过渡小组的孩子必须被锁住...但是他们被锁住了

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"可以满足此要求，但是我得到上面粘贴的错误。

Answer 1

您必须为您的<div class="instruments"> 元素提供唯一键，因为始终要求a 内的元素<transition-group>（尤其是直接子元素） 具有唯一键属性。

如果您不想给它提供密钥.instruments，则可以删除该元素并为其分配tag和class属性，<transition-group>因为它会呈现一个实际元素，默认情况下为a <span>。

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

这样，由于直系子代（.instrument）已为其分配了唯一键，因此不再显示警告。