允许在引导值中重复标记

Question

我遇到了在引导Vue中使用重复标签的麻烦。

我在引导Vue中使用表单标签。我不能在现有值中添加相同的值。

['apple', 'orange', 'banana']

例如，我不能添加新值"apple"如果"apple"已经在值数组中。这是因为表单标签检查重复的值和块，以便将它们添加到值数组中。

如何添加相同的值到这个数组?

下面是我使用的代码:

<template>
<div>
<b-form-tags v-model="value" no-outer-focus class="mb-2">
<template v-slot="{ tags, inputAttrs, inputHandlers, tagVariant, addTag, removeTag }">
<b-input-group class="mb-2">
<b-form-input
v-bind="inputAttrs"
v-on="inputHandlers"
placeholder="New tag - Press enter to add"
class="form-control"
></b-form-input>
<b-input-group-append>
<b-button @click="addTag()" variant="primary">Add</b-button>
</b-input-group-append>
</b-input-group>
<div class="d-inline-block" style="font-size: 1.5rem;">
<b-form-tag
v-for="tag in tags"
@remove="removeTag(tag)"
:key="tag"
:title="tag"
:variant="tagVariant"
class="mr-1"
>{{ tag }}</b-form-tag>
</div>
</template>
</b-form-tags>
</div>
</template>
<script>
export default {
data() {
return {
value: ['apple', 'orange', 'banana']
}
}
}
</script>

Answer 1

这是因为您正在遍历字符串数组并使用数组元素作为key。

要给Vue一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，您需要为每个项

提供一个唯一的键属性

注意"您需要为每个项目提供一个唯一的键属性">，但你正在做相反的，并使用数组元素作为关键，处理这种情况下，你总是可以使用index从循环，因为索引是唯一的每个元素，所以:

<b-form-tag
v-for="(tag, index) in tags"
@remove="removeTag(tag)"
:key="index"
:title="tag"
:variant="tagVariant"
class="mr-1"
>{{ tag }}</b-form-tag>
</div>

现在这将不会给你重复的项目错误:)