BootstrapVue form tags input v-model

Question

I have a b-form-tag like this:

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

And in the data section:

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

In the search variable only tags will be stored, buy I also need to access to the current typing text of the input and bind it to one variable in data. I know it must be done using inputAttrs or inputHandlers but I don't know how?

Dan · Accepted Answer · 2020-11-19 08:42:58Z

You can use custom inputs. This will force you to recreate some functionality for clearing the input and adding tags. Here is a demo where I've simplified the docs' advanced example. It initializes the tag value, reimplements adding tags with Enter, and shows setting v-model programatically:

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/[email protected]/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" />

I really didn't want to mess around with templates, so I ended up using tag-validator as kind of an event when the current tag is changing! :D

Collectives™ on Stack Overflow

BootstrapVue form tags input v-model

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related