【Vue.js】Element Uiでautocompleteのサジェスト機能を導入する方法と使い方！

import Vue from 'vue'
import {
    Alert,
    Input,
    Dialog,
    Autocomplete, // 追加
} from 'element-ui'
import lang from 'element-ui/lib/locale/lang/ja'
import 'element-ui/lib/theme-chalk/index.css';
import locale from 'element-ui/lib/locale'

locale.use(lang)
const components = [
    Alert,
    Input,
    Dialog,
    Autocomplete, // 追加
];

const Element = {
    install(Vue) {
        components.forEach(component => {
            Vue.component(component.name, component)
        })
    }
}
Vue.use(Element, { locale })

<el-row class="demo-autocomplete">
  <!-- タイプ１ --> 
  <el-col :span="12">
    <div class="sub-title">list suggestions when activated</div>
    <el-autocomplete
      class="inline-input"
      v-model="state1"
      :fetch-suggestions="querySearch"
      placeholder="Please Input"
      @select="handleSelect"
    ></el-autocomplete>
  </el-col>
  <!-- タイプ２ -->  
  <el-col :span="12">
    <div class="sub-title">list suggestions on input</div>
    <el-autocomplete
      class="inline-input"
      v-model="state2"
      :fetch-suggestions="querySearch"
      placeholder="Please Input"
      :trigger-on-focus="false"
      @select="handleSelect"
    ></el-autocomplete>
  </el-col>
</el-row>
<script>

  export default {
    data() {
      return {
        links: [],
        state1: '',
        state2: ''
      };
    },
    methods: {
      querySearch(queryString, cb) {
        var links = this.links;
        var results = queryString ? links.filter(this.createFilter(queryString)) : links;
        // call callback function to return suggestions
        cb(results);
      },
      createFilter(queryString) {
        return (link) => {
          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      loadAll() {
        return [
          { "value": "vue", "link": "https://github.com/vuejs/vue" },
          { "value": "element", "link": "https://github.com/ElemeFE/element" },
          { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
          { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
          { "value": "vuex", "link": "https://github.com/vuejs/vuex" },
          { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
          { "value": "babel", "link": "https://github.com/babel/babel" }
         ];
      },
      handleSelect(item) {
        console.log(item);
      }
    },
    mounted() {
      this.links = this.loadAll();
    }
  }
</script>

{"category_id":1,"value":"食事"},
{"category_id":2,"value":"スポーツ"},
{"category_id":3,"value":"読書"},
{"category_id":4,"value":"住まい"},
{"category_id":5,"value":"子供"},
{"category_id":6,"value":"お金"},
{"category_id":7,"value":"生活"}....

Route::post('/api/category', 'App\Http\Controllers\ApiController@category');

public function category()
{
  $category = DB::select('SELECT * FROM category');
  return $category;
}

export default new Vuex.Store({
    strict: true,
    state: {
        links: [],
    },
    mutations: {
      getCategory(state, api) {
            state.links = api;
        },  
    }.
    actions: {
    async callCategory(context) {
          const response = await axios.post("/api/category");
          context.commit('getCategory', response.data);
    }
}

<template>
    <el-autocomplete
      v-model="category"
      :fetch-suggestions="querySearch"
      placeholder="カテゴリ"
      :class="{err:err.category}"
      @select="checkPost"
      @blur="checkPost"
      ></el-autocomplete>
      <!-- サジェストから選択された時 @select-->  
      <!-- フォーカスが外れた時 @blur-->  
</template>

<script>
export default {
    data() {
      return {
        category: "",
        category_id: "",
        err:{
          category:false,
        },
      };
    },
    computed: {
      links() {
        return this.$store.state.links;
      },
    },
    methods: {          
      querySearch(queryString, cb) {
        var links = this.links;
        var results = queryString
          ? links.filter(this.createFilter(queryString))
          : links;
        // call callback function to return suggestions
        cb(results);
      },
      createFilter(queryString) {
        return (link) => {
          return (
            link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
          );
        };
      },
      checkPost(item){
        if(item.value !==  undefined){
            this.category = item.value
        }
          if(this.category !== ""){
            const target = this.links.find((data)=> {return (data.value === this.category)});
              if(target === undefined){
                this.err.category= true;
              }else{
                // 選択された正しいカテゴリidを格納
                this.category_id =target.category_id;
                this.err.category= false;
              };
        }

      },
    },
};
</script>

if(item.value !==  undefined){
  this.category = item.value
}