时间戳

首页 > 解决方案 > 在 Vue 中，为什么当 if 和 for 在标签上时会发生键重复？

vue.js - 在 Vue 中，为什么当 if 和 for 在标签上时会发生键重复？

问题描述

以下代码会报错：key duplication

<option-group
    v-if="dataSource[0] && dataSource[0].options"
    v-for="item in dataSource"
    :key="item.label"
    :label="item.label"
>
...
</option-group>
<Option
    v-else
    v-for="option in dataSource"
    :label="option.label"
    :value="option.value"
    :key="option.value"
></Option>

但是当我用“模板”标签包装代码时，以下代码不会报告错误：

<template v-if="dataSource[0] && dataSource[0].options">
    <option-group
        v-for="item in dataSource"
        :key="item.label"
        :label="item.label"
    >
    ...
    </option-group>
</template>
<template v-else>
    <Option
        v-for="option in dataSource"
        :label="option.label"
        :value="option.value"
        :key="option.value"
    ></Option>
</template>

我想知道为什么？

标签： vue.jsduplicateskey

解决方案

这是因为在您的第一个示例中，option-group和Option组件都被渲染，因此相同的键位于两个不同的元素中，一个 inoption-group和一个 in Option。

两者都被渲染是因为您同时使用了v-for和v-if。不推荐，因为

VueJS 将 v-for 指令优先于 v-if 指令。所以在底层，它循环遍历每个元素，然后检查 v-if 条件。

你可以在这里阅读更多关于它的信息

推荐阅读