本文介绍了过渡组孩子必须有键……但他们是有键的的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

尝试在我的组件模板中使用 ,但出现错误:

[Vue 警告]:孩子必须被键入:<div>

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

//jsVue.component('仪器', {模板:`<transition-group name="fade"><div class="instruments"><div class="instrument" v-for="(instrument, index) in filtersInstruments" 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>

</transition-group>`}

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

解决方案

如果你不想给 .instruments 一个键,你可以删除那个元素并分配一个 tagclass 属性改为 ,因为它呈现一个实际元素,默认情况下是 .

这样,警告就不会再出现了,因为直接子项 (.instrument) 已分配给他们唯一的键.

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

[Vue warn]: <transition-group> children must be keyed: <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>
    `
}

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

解决方案

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

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

这篇关于过渡组孩子必须有键……但他们是有键的的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-22 20:26