How can you add groups to a buefy b-taginput?

user_3476215 0
Viewed 678

I'm quite new to Buefy, vue, and javascript in general and I am trying to add a grouped drop down to a b-taginput

Adding autocomplete appears to enable the dropdown, but it's missing groups. Below is what I've got so far..

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://unpkg.com/buefy/dist/buefy.min.css">
</head>

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>

<div id="app">
  <b-field label="Tag">
    <b-taginput v-model="selected" :data="myDataTags" autocomplete open-on-focus type="is-primary"></b-taginput>
  </b-field>
  <b-field label="Group">
    <b-select placeholder="Select a character">
      <optgroup v-for="(option, key) in myData" v-bind:label="key">
        <option v-for="opt in option">
          {{ opt }}
        </option>
      </optgroup>
    </b-select>
  </b-field>
</div>

new Vue({
  el: "#app",
  data: {
    selected: [],
    myData: {
      'First': ['One', 'Two'],
      'Second': ['Three']
    }  
  },
  computed: {
    myDataTags() {
      var items = [];
      for (var key in this.myData) {
       if (this.myData.hasOwnProperty(key)) {
          var obj = this.myData[key];
          for (var prop in obj) {
                items.push(obj[prop]);            
          }
       }
    }
    return items;
    }
  }
})

My fiddle: https://jsfiddle.net/Konnor5092/z8doLt4j/124/

I've added a b-select which is how I would like my b-taginput dropdown to be displayed.

What can I do to achieve this?

Thanks,

buefy vue.js javascript
2 Answers

I think you cannot do that directly because there is no slot to the entire dropdown, only for header, footer and individual items with <template slot-scope="props">.

In fact b-taginput is a combination of b-autocomplete component and a v-for of b-tag components. So you can use all slots of the autocomplete component (empty, header, footer) and slots of the taginput component (empty, header).

So, to do what you want, the only way is to fork the b-taginput component and customize the dropdown. Here is the code of this component: https://github.com/buefy/buefy/blob/dev/src/components/taginput/Taginput.vue

user_4799570

Great news! Since v0.9.2 Buefy's Autocomplete and Taginput components have built-in support for grouped search results.

Beufy documentation

This should work:

<b-field label="Tag">
    <b-taginput 
        v-model="selected"
        :data="myData"
        autocomplete 
        open-on-focus
        type="is-primary"
        group-field="name"
        group-options="items"
    />
</b-field>

new Vue({
  el: "#app",
  data: {
    selected: [],
    myData: [
      {
         name: 'First',
         items: ['One', 'Two'],
      },
      {
         name: 'Second',
         items: ['Three'],
      },
    ]
  },
})

It even works with options that are objects - the "field" prop on the taginput indicates what path to use for the options' labels in that case

user_20184960
Related