允许在引导 vue 中重复标签

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。请阅读this：

要给 Vue 一个提示，以便它可以跟踪每个节点的身份，从而重用和重新排序现有元素，您需要为每个项目提供唯一的 key 属性

注意“您需要为每个项目提供唯一的键属性”，但您正在做相反的事情并使用数组元素作为键，要处理这种情况，您可以随时使用index from循环，因为 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>

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