Buefy — Autocomplete Customization

Photo by Vitto Sommella 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.

Header

We can add a custom header to the autocomplete.

To do that, we populate the header slot:

<template>
  <section>
    <b-field label="favorite fruit">
      <b-autocomplete
        rounded
        v-model="name"
        :data="filteredDataArray"
        placeholder="fruit"
        clearable
        ref="autocomplete"
        @select="option => selected = option"
      >
        <template slot="empty">No results found</template>
        <template slot="header">
          <a @click="showAddFruit">
            <span>Add new...</span>
          </a>
        </template>
      </b-autocomplete>
    </b-field>
  </section>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      data: ["apple", "orange", "grape"],
      name: ""
    };
  },
  methods: {
    showAddFruit() {
      this.$buefy.dialog.prompt({
        message: `Fruit`,
        inputAttrs: {
          placeholder: "fruit",
          maxlength: 20,
          value: this.name
        },
        confirmText: "Add",
        onConfirm: value => {
          this.data.push(value);
          this.$refs.autocomplete.setSelected(value);
        }
      });
    }
  }…