CategoriesUncategorized

Adding Buefy Autocomplete Quick Start

Input box in <template>:

Input box in <template>:

			<b-autocomplete
                v-model="testGrader"
                placeholder="Grader Name"
                :data="filteredDataArray"
                >
			</b-autocomplete>

Created:

created() {
    this.getAllGraders();
    this.filteredGraders();
  },

Computed:

filteredDataArray() {
      return this.gradersArray.filter(option => option
        .toString()
        .toLowerCase()
        .indexOf(this.testGrader.toLowerCase()) >= 0);
},

Data:

data() {
  return {
      graderList: [],
      gradersArray: [],
  };
}

Method (Get Data From Store):

methods: {
	getAllGraders() {
      this.graderList = this.$store.state.graders;
    },
    filteredGraders() {
      this.graderList.forEach((data) => {
        if (data !== null) {
          this.gradersArray.push(data);
        }
      });
    },
}

Sample data from $store:

[null,"Madge Calbreath","Jacquenette Romera","Frazier Harvison","Kennith Perford","Flory Castiglione","Kerri Fedoronko","Beauregard Northgraves","Terrel Giraths","Kenton Lickorish","Egbert Mallya","Axel Aldwich","Bria Rames","joe","Rhoda Lordon","Durant Shalliker","Christophorus Woodhouse","Creight Lennox","Gardiner Lauret","Rasia MacConneely","Shelby Antoniewski"]

Leave a Reply

Your email address will not be published. Required fields are marked *