Как вы можете добавить группы к buefy b-taginput?

Я новичок в 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
person Konzy262    schedule 01.07.2019    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Я думаю, вы не можете сделать это напрямую, потому что нет места для всего раскрывающегося списка, только для верхнего, нижнего колонтитула и отдельных элементов с <template slot-scope="props">.

Фактически b-taginput - это комбинация b-autocomplete компонента и v-for из b-tag компонентов. Таким образом, вы можете использовать все slots из компонента автозаполнения (пустой, верхний и нижний колонтитулы) и slots из компонент taginput (пустой, заголовок).

Итак, чтобы сделать то, что вы хотите, единственный способ - это разветвить компонент b-taginput и настроить раскрывающийся список. Вот код этого компонента: https://github.com/buefy/buefy/blob/dev/src/components/taginput/Taginput.vue

person ManUtopiK    schedule 27.08.2019

arrow_upward
0
arrow_downward

Отличные новости! Начиная с v0.9.2 компоненты Buefy Autocomplete и Taginput имеют встроенную поддержку сгруппированных результатов поиска.

документация Beufy

Это должно работать:

<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 указывает, какой путь использовать для меток параметров в этом случае

person lukenofurther    schedule 15.09.2020