Buefy is a UI framework that’s based on Bulma.
In this article, we’ll look at how to use Buefy in our Vue app.
Multiple Selection Drop Down
We can set the multiple prop to let us select one or more items.
For example, we can write:
<template>
<section>
<b-dropdown v-model="selectedOptions" multiple>
<button class="button is-primary" type="button" slot="trigger">
<span>Selected ({{ selectedOptions.length }})</span>
</button>
<b-dropdown-item value="option1">
<span>Option 1</span>
</b-dropdown-item>
<b-dropdown-item value="option2">
<span>Option 2</span>
</b-dropdown-item>
<b-dropdown-item value="option3">
<span>Option 3</span>
</b-dropdown-item>
</b-dropdown>
</section>
</template>
<script>
export default {
name: "App",
data() {
return {
selectedOptions: []
};
}
};
</script>
We added the multiple prop to enable multiple selections.
v-model has the selected items.
The value prop has the value of the selected item.
Scrollable Drop Down
We can add the scrollable prop to make the list scrollable.
For example, we can write:
<template>
<section>
<b-dropdown :scrollable="isScrollable" :max-height="maxHeight" v-model="currentMenu">
<button class="button is-primary" type="button" slot="trigger">
<template>
<span>{{currentMenu.text}}</span>
</template>
</button>
<b-dropdown-item v-for="(menu, index) in menus" :key="index" :value="menu">
<div class="media">
<b-icon class="media-left" :icon="menu.icon"></b-icon>
<div class="media-content">
<h3>{{menu.text}}</h3>
</div>
</div>
</b-dropdown-item>
</b-dropdown>
</section>
</template>
<script>
export default {
name: "App",
data() {
return {
isScrollable: true,
maxHeight: 100,
currentMenu: { text: "People" },
menus: [{ text: "People" }, { text: "Orders" }, { text: "Settings" }]
};
}
};
</script>
to show the dropdown with a max height.
The scrollable prop makes the menu scrollable.
maxHeight sets the max height of the dropdown menu.
Autocomplete
Buefy comes with an autocomplete component.
We can add it by adding the b-autocomplete component:
<template>
<section>
<b-field label="favorite fruit">
<b-autocomplete
rounded
v-model="name"
:data="filteredDataArray"
placeholder="fruit"
clearable
@select="option => selected = option"
>
<template slot="empty">No results found</template>
</b-autocomplete>
</b-field>
</section>
</template>
<script>
export default {
name: "App",
data() {
return {
data: ["apple", "orange", "grape"],
name: ""
};
},
computed: {
filteredDataArray() {
return this.data.filter(option => {
return (
option
.toString()
.toLowerCase()
.indexOf(this.name.toLowerCase()) >= 0
);
});
}
}
};
</script>
We have the filteredDataArray computed property to compute the choices that we can select based on what we typed in.
The option parameter has the choice.
The name state has what we typed in since we bound it with v-model .
rounded makes the input rounded.
clearable makes the input clearable.
The @select callback lets us set the choice.
Object Array for Choices
We can use an object array for the choices.
For example, we can write:
<template>
<section>
<b-field label="favorite fruit">
<b-autocomplete
rounded
v-model="name"
:data="filteredDataArray"
placeholder="fruit"
clearable
field="name"
@select="option => selected = option"
>
<template slot="empty">No results found</template>
</b-autocomplete>
</b-field>
</section>
</template>
<script>
export default {
name: "App",
data() {
return {
data: [{ name: "apple" }, { name: "orange" }, { name: "grape" }],
name: ""
};
},
computed: {
filteredDataArray() {
return this.data.filter(option => {
return (
option.name
.toString()
.toLowerCase()
.indexOf(this.name.toLowerCase()) >= 0
);
});
}
}
};
</script>
We set the field prop to the property we want so we can display it as the choice.
Also, we changed the filteredDataArray computed property to use the name property instead of option itself.
Conclusion
We can make a dropdown that let us choose multiple items.
Also, we can add an autocomplete input with Buefy’s b-autocomplete component.
