Question

我一般对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下拉菜单的方式。

我该怎么做？

谢谢

Answer 1

我认为您无法直接执行此操作，因为整个下拉列表没有插槽，仅适用于带有<template slot-scope="props">的页眉，页脚和单个项目。

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

因此，要做您想做的事情，唯一的办法是派生slots组件并自定义下拉菜单。这是此组件的代码：https://github.com/buefy/buefy/blob/dev/src/components/taginput/Taginput.vue

Answer 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上的“ field”道具指示在这种情况下用于选项标签的路径

如何将组添加到有效的b-taginput？

2 个答案: