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 中的一个变量。我知道必须使用 inputAttrs 或 inputHandlers 来完成，但我不知道怎么做？

Answer 1

您可以使用自定义输入。这将迫使您重新创建一些功能来清除输入和添加标签。这是一个演示，我在其中简化了文档 advanced example。它初始化标签值，使用 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" />

BootstrapVue 表单标签输入 v-model

BootstrapVue form tags input v-model

javascript

vue.js

bootstrap-4

vuejs2

bootstrap-vue