Блог

Главная - Вопросы по программированию - Теги формы BootstrapVue для ввода v-модели

Теги формы BootstrapVue для ввода v-модели

#javascript #vue.js #bootstrap-4 #vuejs2 #bootstrap-vue

#javascript #vue.js #bootstrap-4 #vuejs2 #bootstrap-vue

Вопрос:

У меня есть b-form-tag такой:

 <b-form-group label="Search" label-for="search">
    <b-form-tags
        id="search"
        v-model="search"
        separator=","
        remove-on-delete
        tag-variant="primary"
        tag-pills
        placeholder="Search here..."
    ></b-form-tags>
</b-form-group>

И в data разделе:

 data() {
    return {
        search: []
    }
}

В search переменной будут сохранены только теги, но мне также нужно получить доступ к текущему вводимому тексту ввода и привязать его к одной переменной data . Я знаю, что это должно быть сделано с помощью inputAttrs или inputHandlers , но я не знаю как?

Ответ №1:

Вы можете использовать пользовательские входные данные. Это заставит вас воссоздать некоторые функциональные возможности для очистки ввода и добавления тегов. Вот демонстрация, в которой я упростил расширенный пример документов. Он инициализирует значение тега, переопределяет добавление тегов с Enterпомощью и показывает настройку v-model программно:

 new Vue({
  el: "#app",
  data() {
    return {
      newTag: 'starting text',
      value: []
    }
  },
  methods: {
    resetInputValue() {
      this.newTag = ''
    },
    setTag(text) {
      this.newTag = text;
    }
  }
});  
 <div id="app">
    <b-form-tags
      v-model="value"
      @input="resetInputValue()"
      tag-variant="success"
      class="mb-2 mt-2"
      placeholder="Enter a new tag value and click Add"
    >
      <template v-slot="{tags, inputId, placeholder, addTag, removeTag }">
        <b-input-group>
          <!-- Always bind the id to the input so that it can be focused when needed -->
          <b-form-input
            v-model="newTag"
            :id="inputId"
            :placeholder="placeholder"
            @keydown.enter="addTag(newTag)"            
          ></b-form-input>
          <b-input-group-append>
            <b-button @click="addTag(newTag)" variant="primary">Add</b-button>
          </b-input-group-append>
        </b-input-group>
        <div v-if="tags.length" class="d-inline-block" style="font-size: 1.5rem;">
          <b-form-tag
            v-for="tag in tags"
            @remove="removeTag(tag)"
            :key="tag"
            :title="tag"
            class="mr-1"
          >{{ tag }}</b-form-tag>
        </div>
        <b-form-text v-else>
          There are no tags specified. Add a new tag above.
        </b-form-text>
      </template>
    </b-form-tags>
    <div>Text from `v-model`: {{ newTag }}</div>
    <div><button @click="setTag('programatically')">Set v-model programatically</button></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.19.0/bootstrap-vue.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.19.0/bootstrap-vue.min.css" rel="stylesheet" />

Комментарии:

1. Я действительно не хотел возиться с шаблонами, поэтому в итоге я использовал tag-validator как своего рода событие при изменении текущего тега! : D