Как использовать объект в качестве тега при использовании компонента «Теги формы» в bootstrap vue - PullRequest
Новая
       22

Как использовать объект в качестве тега при использовании компонента «Теги формы» в bootstrap vue

1 голос
/ 23 января 2020

Чтобы объяснить вопрос, используйте код из документации, приведенной ниже: 

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

Приведенный выше код дает следующий вывод: enter image description here

Но когда у меня есть значения в виде массива объектов вместо коротких строк, как отобразить свойства объектов в качестве элементов тега?

например: если у меня есть значение: [{name: 'apple', color: 'red'}, {name:'mango', color: 'yellow'}], то как получить тот же вывод как указано выше? Я попробовал что-то вроде <strong>{{ tag.name }}</strong>, и оно не работает и дает мне только пустые теги для удаления следующим образом: tag names are missing here Любые идеи о том, как добиться того, что я хотел сделать здесь?

1 Ответ

2 голосов
/ 23 января 2020

То, что вы пытаетесь сделать, пока не поддерживается в соответствии с этой проблемой

Вам придется сопоставить ваш массив объектов со строковым массивом и использовать его.

Затем, когда вы будете готовы «использовать» свои теги, вы можете отобразить их обратно на основе исходных объектов.

Вот довольно простой пример того, что можно сделать. 

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