BootstrapVue表单标签输入v-model

Question

我有一个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. 我知道必须使用inputAttrsor来完成，inputHandlers但我不知道如何？

Answer 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" />