个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
总的来说，我对 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
关于javascript - 如何将组添加到 buefy b-taginput？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56843533/
27
4
0
在我的 Vue.js 应用程序中，我使用 taginput Buefy 库的元素。我想为输入添加验证。只能输入数字，不能输入字母。我尝试了下一个代码，但不幸的是它不起作用。如何解决这个问题？ on
我一直在逐字逐句地学习教程，但我收到一个错误，我无法从制作教程的人那里得到答案! 我到达了教程的这一部分，这是错误的地方: http://www.gamefromscratch.com/page/Ga
总的来说，我对 Buefy、vue 和 javascript 很陌生，我正在尝试将分组下拉列表添加到 b-taginput 添加 autocomplete 似乎启用了下拉列表，但它缺少组。以下是我到目
我正在尝试实现 TagInput对于 bootstrap 3，但是当我尝试初始化它时，它给了我一个错误 Uncaught TypeError: Property 'undefined' of obje
我正在尝试实现 TagInput对于 bootstrap 3 但是当我尝试初始化它时，它给我一个错误 Uncaught TypeError: Property 'undefined' of objec
我正在使用以下脚本从我的 Controller 获取所有标签并将其用作预输入 $(function () { var substringMatcher = function
我正在使用Bootstrap Tags Input 我正在尝试动态添加标签。 $('.div-tag').tagsinput('add', 'vino'); 上面的代码工作正常，但是当我尝试以下代码时
在 React/BlueprintJS 应用程序中，我有一个 TagInput。我需要在单击时访问任何标签的字符串值。为了简单起见，我们假设我只需要 console.log(value)。 我似乎无法
在我的 Vue.js(版本 2.5.22)应用程序中，我使用 Buefy 库中的 UI 组件。我用taginput元素。如果我有 5 个标签的限制(如下例所示)，则当输入有 5 个标签时，边框会消失。
我是一名优秀的程序员,十分优秀！