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

【问题标题】：Transition-group children must be keyed...but they are keyed过渡组的孩子必须有钥匙……但他们有钥匙
【发布时间】：2019-06-05 12:20:30
【问题描述】：

尝试在我的组件模板中使用<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" 可以满足这一点，但我得到了上面粘贴的错误。

【问题讨论】：

标签： vue.js vue-component

【解决方案1】：

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

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

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

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

【讨论】：

"..特别是 immediate 孩子总是需要有一个唯一的关键属性”......绝对是答案！不敢相信我错过了这个。我按照您上面的建议将课程交给了<transition-group> 组件，并删除了额外的 div。谢谢！

【解决方案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-button 移出 transition-group

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

一个或多个 keys 为 null 或未定义。

例如渲染：

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。

【讨论】：