Buefy — Dropdowns and Autocomplete

Image for post
Image for post
Photo by Campbell Boulanger on Unsplash

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.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store