今回のやってみること
kazuki.m
ページタイトルの入力補完と、ページ遷移をやってみます。
Vue3とVuetify3でページ名で検索するコンポーネントを開発します。
使用する部品は<v-autocomplete>です。
表示するオブジェクトをPropsに渡してあげれば、入力補完してくれます。
さらにクリックした際に、オブジェクトで設定してあるページリンクに遷移する処理を追加します。
主な開発内容
Props
v-modelにはリアクティブのselectItemを渡します。selectItemが選択した値のオブジェクトを保持します。
itemsには入力補完で表示したいオブジェクトのリストを渡します。item-text、item-valueでそれぞれ表示する内容とその値を設定できます。
prepend-iconには虫眼鏡アイコンを設定しています。
最後にupdate:searchに、search処理を設定しています。これで入力後にページ（item-valueで設定したリンク先）遷移します。
Script
今回はsearch関数一つです。
Vue-routerのuseRouter()をあらかじめ設定しており、router.push({})を使ってリンク先に遷移します。
