过渡组的孩子必须有钥匙……但他们有钥匙

2022-01-25 00:00:00 vue.js vue-component

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

Trying to use <animation-group> in my component template, but getting error:

[Vue 警告]:<transition-group>子项必须键入:<div>

但我很确定它们是有键的.

But I'm pretty sure that they are keyed.

//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" 可以满足这一点，但我得到了上面粘贴的错误.

I think that setting v-bind:key="index" would take satisfy this, but I get the error pasted above.

推荐答案

您必须为您的 <div class="instruments"> 提供唯一的密钥元素，因为 <transition-group> 中的 元素，特别是直接子元素，总是需要具有唯一键属性.

You have to give a unique key to your <div class="instruments"> element since elements inside a <transition-group>, specifically the immediate children, are always required to have a unique key attribute.

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

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> instead since it renders an actual element which by default is a <span>.

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

通过这种方式，警告将不再出现，因为直接子级 (.instrument) 已为其分配了唯一键.

In this way, the warning would not appear anymore since the immediate children (.instrument) have their unique keys assigned to them.

相关文章