3

一般来说，我对 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下拉列表显示的方式。

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

谢谢，

4

2 回答 2

0

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

美化文档

这应该有效：

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

于 2020-09-15T21:02:13.063 回答
0

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

实际上b-taginput是b-autocomplete组件和组件v-for的组合b-tag。因此，您可以使用所有slots的自动完成组件（空、页眉、页脚）和slotstaginput组件（空、页眉）。

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

于 2019-08-27T10:25:06.020 回答