总的来说，我对 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;
}
}
})
我的 fiddle :https://jsfiddle.net/Konnor5092/z8doLt4j/124/
我添加了一个 b-select，这是我希望我的 b-taginput 下拉列表的显示方式。
我该怎么做才能实现这一目标？
谢谢，
最佳答案
我认为你不能直接这样做，因为整个下拉菜单没有插槽，只有页眉、页脚和带有 <template slot-scope="props"> 的个别项目.
事实上b-taginput是 b-autocomplete 的组合组件和一个 v-for的 b-tag组件。所以你可以使用所有slots的 autocomplete component (空，页眉，页脚)和 slots的 taginput component (空，标题)。
所以，要想做你想做的事，唯一的方法就是 fork b-taginput组件并自定义下拉列表。这是此组件的代码:https://github.com/buefy/buefy/blob/dev/src/components/taginput/Taginput.vue
https://stackoverflow.com/questions/56843533/
相关文章：
android-studio - 安卓工作室 : Cannot get DialogFragment
reactjs - 我是否需要在功能性 React 组件中对功能 Prop 使用 useCallba
sql - 如何在 AWS Athena 中编写多个 SQL 语句，如 CREATE 表(使用 CL
javascript - 如何确保我的第一个 React 渲染具有来自 localStorage 的
ruby - Jekyll:尽管安装了最新版本，但命令未发现问题
vue.js - 动态路由器链接将 *slash* 更改为 %2F