в Vue, Почему дублирование ключа происходит, если если и для на этикетке？ - PullRequest
Новая
       27

в Vue, Почему дублирование ключа происходит, если если и для на этикетке？

0 голосов
/ 24 марта 2020

Следующий код сообщит об ошибке: дублирование ключа 

<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': 

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

Я хочу знать, почему?

1 Ответ

0 голосов
/ 24 марта 2020

Это потому, что в вашем первом примере оба компонента option-group и Option отображаются таким образом, один и тот же ключ находится в двух разных элементах, один в option-group и один в Option.

Оба отрендерено, потому что вы использовали v-for и v-if одновременно. Это не рекомендуется, потому что

VueJS отдает приоритет директиве v-for над директивой v-if. Таким образом, под капотом он проходит через каждый элемент, а затем проверяет условное выражение v-if.

Подробнее об этом можно прочитать здесь

...