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

您必须为php artisan config:cache赋予唯一的密钥元素，因为{strong> php artisan config:clear中的元素（尤其是直属子元素）始终是 必须具有唯一键属性。

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

<transition-group>

通过这种方式，由于直系子项（<span>）已为其分配了唯一键，因此不再显示警告。

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按钮移出过渡组

Answer 3

只需将键分配给::中的每个元素：
就是这样：

<transition-group name="fade" tag="div" class="instruments">
   <div class="lorem" key="lorem">lorem ibsum</div>
   <div class="lorem2" key="lorem2">lorem2 ibsum</div>
   <div class="lorem3" key="lorem3">lorem3 ibsum</div>
</transition-group>

Answer 4

一个或多个键为空或未定义。

例如渲染：

const itemArray = [
    {
        id: 1,
        name: "Alisson"
    },
    {
        id: null,
        name: "Fabinho"
    },
    {
        name: "van Dijk"
    }
]

像这样：

<transition-group name="fade">
  <div v-for="item in itemArray" :key="item.id">
    {{ item.name }}
  </div>
</transition-group>

会出错，因为存在 null 和 undefined id。

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

4 个答案: