在 bootstrap vue 中使用表单标签组件时如何使用对象作为标签答案

【问题标题】：How to use object as a tag while using the Form Tags component in bootstrap vue在 bootstrap vue 中使用表单标签组件时如何使用对象作为标签
【发布时间】：2020-05-09 21:06:56
【问题描述】：

为了解释这个问题，请使用以下文档中的代码：

<template>
  <div>
  <b-form-tags v-model="value" no-outer-focus class="mb-2">
    <template v-slot="{ tags, inputAttrs, inputHandlers, addTag, removeTag }">
      <b-input-group aria-controls="my-custom-tags-list">
        <input
          v-bind="inputAttrs"
          v-on="inputHandlers"
          placeholder="New tag - Press enter to add"
          class="form-control">
        <b-input-group-append>
          <b-button @click="addTag()" variant="primary">Add</b-button>
        </b-input-group-append>
      </b-input-group>
      <ul
        id="my-custom-tags-list"
        class="list-unstyled d-inline-flex flex-wrap mb-0"
        aria-live="polite"
        aria-atomic="false"
        aria-relevant="additions removals"
      >
      <!-- Always use the tag value as the :key, not the index! -->
      <!-- Otherwise screen readers will not read the tag
           additions and removals correctly -->
        <b-card
          v-for="tag in tags"
          :key="tag"
          :id="`my-custom-tags-tag_${tag.replace(/\s/g, '_')}_`"
          tag="li"
          class="mt-1 mr-1"
          body-class="py-1 pr-2 text-nowrap"
        >
          <strong>{{ tag }}</strong>
          <b-button
            @click="removeTag(tag)"
            variant="link"
            size="sm"
            :aria-controls="`my-custom-tags-tag_${tag.replace(/\s/g, '_')}_`"
            >remove</b-button>
          </b-card>
        </ul>
      </template>
    </b-form-tags>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        value: ['apple', 'orange', 'banana', 'pear', 'peach']
      }
    }
  }
</script>

上面的代码给出的输出如下：

但是当我将值作为对象数组而不是短字符串时，如何将对象的属性呈现为标记元素？

例如：如果我有值：[{name: 'apple', color: 'red'}, {name:'mango', color: 'yellow'}] 那么如何获得与上面相同的输出？我尝试了类似<strong>{{ tag.name }}</strong> 的东西，但它不起作用，只给了我要删除的空标签，如下所示：关于如何实现我想要在这里做的任何想法？

【问题讨论】：

用户如何在文本输入字段中输入标签作为对象？

标签： javascript vue.js vue-component bootstrap-vue

【解决方案1】：

根据this issue，您正在尝试做的还不支持

您必须将对象数组映射到字符串数组并加以利用。

然后，一旦您准备好“使用”您的标签，您就可以根据原始对象将它们映射回来。

这里有一个相当简单的例子来说明可以做什么。

new Vue({
  el: "#app",
  computed: {
    mappedTags() {
      /* This is case sensitive */
      return this.options.filter(option => this.value.includes(option.name))
    }
  },
  data: {
    value: [],
    options: [{
        name: 'Mango',
        color: 'Orange'
      },
      {
        name: 'Orange',
        color: 'Orange'
      },
      {
        name: 'Lemon',
        color: 'Yellow'
      },
      {
        name: 'Apple',
        color: 'Red'
      },
      {
        name: 'Banana',
        color: 'Yellow'
      },
    ]
  }
})

<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.4.0/dist/bootstrap-vue.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.2.2/dist/bootstrap-vue.js"></script>
<style>
  /* Only added for better visibility on the text */
  
  .text-stroke {
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  }
</style>

<div id="app" class="p-3">
  Valid (<b>Casesensitive</b>) tags - [Banana, Apple, Orange, Mango]
  <b-form-tags v-model="value" no-outer-focus class="mb-2">
    <template v-slot="{ tags, inputAttrs, inputHandlers, addTag, removeTag }">
      <b-input-group aria-controls="my-custom-tags-list">
        <b-input
          v-bind="inputAttrs"
          v-on="inputHandlers"
          placeholder="New tag - Press enter to add"></b-input>
        <b-input-group-append>
          <b-button @click="addTag()" variant="primary">Add</b-button>
        </b-input-group-append>
      </b-input-group>
      <ul class="list-unstyled d-inline-flex flex-wrap mb-0">
        <b-card
          v-for="tag in mappedTags"
          :key="tag.name"
          :id="`my-custom-tags-tag_${tag.name.replace(/\s/g, '_')}_`"
          tag="li"
          class="mt-1 mr-1"
          body-class="py-1 pr-2 text-nowrap"
        >
          <strong :style="`color: ${tag.color}`" class="text-stroke">
            {{ tag.name }}
          </strong>
          <b-button
            @click="removeTag(tag.name)"
            variant="link"
          >
            Remove
          </b-button>
        </b-card>
      </ul>
    </template>
  </b-form-tags>
  {{ mappedTags }}
</div>

【讨论】：

【解决方案2】：

将{{ tag.name }} 替换为{{ JSON.parse(tag).name }}。

这应该可以解决问题。

【讨论】：

【解决方案3】：

您有一个类似的示例，其中我需要用户的输入及其选择，并且收集在对象数组中执行两个输入值。

您需要将 v-model 添加到输入中，这样您就可以将其传递给自定义函数

<b-form-input
  v-model="werkTagNombre"

<b-form-select
  v-model="werkTagExp"
...

"@click="addingWerkTag({werkTagNombre, werkTagExp})"

完整的模板代码

<b-form-tags v-model="freelance.tags.nombre">
          <template v-slot="{ inputAttrs, inputHandlers }">
            <b-input-group aria-controls="tags-list">
              <b-form-input
                v-model="werkTagNombre"
                v-bind="inputAttrs"
                v-on="inputHandlers"
                placeholder="Seleccione"
                class="werk-input werk-shadow-input mr-2"
              >
              </b-form-input>
              <b-input-group-append>
                <b-form-select
                  v-model="werkTagExp"
                  :options="experienciaOptions"
                  class="werk-input werk-shadow-input ml-2 mr-2"
                >
                </b-form-select>
              </b-input-group-append>
              <b-input-group-append>
                <b-button class="shadow-none ml-2" style="border-radius:6px;"@click="addingWerkTag({werkTagNombre, werkTagExp})"> ADD</b-button>
              </b-input-group-append>
            </b-input-group>
            <span style="font-size: 10px; color: #a5a5a5;">TAGS:</span>
            <ul id="tags-list" class="list-unstyled d-inline-flex flex-wrap mb-0 mt-1">
              <b-badge
                v-for="(werkTag, index) in freelance.tags"
                :key="index"
                tag="li"
                class="mx-1 my-1 werk-tags"
              >
              {{werkTag.nombre}} {{werkTag.experiencia}}
              </b-badge>
            </ul>
          </template>
        </b-form-tags>

脚本

  export default {
data() {
  return {
    freelance: {
      tags: [
        {
          nombre:" Test name",
          experiencia:1
        }
      ],
}
...
    werkTagNombre: '',
    werkTagExp: '0',
    experienciaOptions: [
      { value: '0', text: 'Selecciona'},
      { value: 1, text: 'menor a 2 años'},
      { value: 2, text: '3 a 5 años'},
      { value: 3, text: 'mayor a 5 años'},
    ]
...

methods:{
 addingWerkTag(valor){
    this.freelance.tags.push({nombre: valor.werkTagNombre, exp: valor.werkTagExp});
  },
 ...
}

如果你愿意，你也可以像这样传递 addTag 默认函数：

在模板槽内添加“addtag”等函数

<template v-slot="{ inputAttrs, inputHandlers, addTag }">
...

所以你可以像这样将它添加到你的自定义函数中：

@click="addingWerkTag({ werkTagNombre, werkTagExp, addTag })"

【讨论】：