如何将组添加到 buefy b-taginput？答案

【问题标题】：How can you add groups to a buefy b-taginput?如何将组添加到 buefy b-taginput？
【发布时间】：2019-11-12 13:47:06
【问题描述】：

总的来说，我对 Buefy、vue 和 javascript 还是很陌生，我正在尝试将分组下拉列表添加到 b-taginput

添加autocomplete 似乎可以启用下拉菜单，但缺少组。以下是我到目前为止所得到的..

<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;
    }
  }
})

我的小提琴：https://jsfiddle.net/Konnor5092/z8doLt4j/124/

我添加了一个b-select，这就是我希望我的b-taginput 下拉菜单显示的方式。

我能做些什么来实现这一目标？

谢谢，

【问题讨论】：

标签： javascript vue.js buefy

【解决方案1】：

我认为您不能直接这样做，因为整个下拉列表没有插槽，仅适用于带有 <template slot-scope="props"> 的页眉、页脚和单个项目。

实际上b-taginput 是b-autocomplete 组件和v-for 的b-tag 组件的组合。所以你可以使用autocomplete component（空，页眉，页脚）的所有slots和taginput component（空，页眉）的slots。

所以，要做你想做的事，唯一的方法是 fork b-taginput 组件并自定义下拉菜单。这是这个组件的代码：https://github.com/buefy/buefy/blob/dev/src/components/taginput/Taginput.vue

【讨论】：

【解决方案2】：

好消息！从 v0.9.2 Buefy 的 Autocomplete 和 Taginput 组件开始，内置了对分组搜索结果的支持。

Beufy documentation

这应该可行：

<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'],
      },
    ]
  },
})

它甚至适用于作为对象的选项 - taginput 上的“字段”属性指示在这种情况下用于选项标签的路径

【讨论】：