【検索機能】Vueで検索窓にオートコンプリートを表示したい場合(vuetify)

自分用メモ

前提　
フロント：Vue.js（Nuxt.js)
バック：Rails(API)
axios導入済み

やりたいこと

Vue側に検索で表示したい候補のデータを、Rails側から受け取り検索窓に入力したときにデータを検索候補として表示したい。
ちなみに今回は表示するまで行い、検索は行わない。
今回はRailsの"/api/v1/posts"からpostテーブルのnameカラムに入っているデータを表示させる。

そのために必要なもの

・axios（API通信）
・vuetify

やること

・vuetifyのv-autocompleteを書く(template)
・dataのなかに表示したいデータを格納する配列を作る (script)
・axiosでRails側からデータをgetメソッドで取得(script)

<template>
 <div>
  <v-autocomplete
   v-model="value"
   :items="spots"
   item-text="name"//postsの表示したいカラム
   label="表示したいラベル"
  ></v-autocomplete>
 </div>
</template>
 
 <script>
 
 //axiosを呼び出す
 import axios from "~/plugins/axios"
 
 export default {
  data () {
   return {
     posts: [],//ここに入っているデータを検索候補で表示(item-text)
     value: null,//入力データを格納
   }
  },
  created() {
  // ユーザーをaxiosで取得
  axios.get("/api/v1/posts").then(res => {
    if (res.data) {
    // 取得したデータをspotsに追加
      this.posts = res.data

    }
  })
 }
 }
</script>