Vue3でsetupを使って動的に一覧を絞り込む検索フォームを作る

変数をセット

まずは変数をセットします。refとwatchを使うのでまずimportして、変数を宣言します。

<script>
import { ref, watch } from 'vue'

export default {
  name: 'Articles',
  setup () {
    let total = ref(0);
    let articles = ref([]);
    let keyword = ref('');
  }
}

一覧を絞り込む関数

続いて、入力結果に応じて一覧を絞り込む関数を作ります。今回はAPIからデータをゲットする前提です。

<script>
import { ref, watch } from 'vue'

export default {
  name: 'Articles',
  setup () {
    let total = ref(0);
    let articles = ref([]);
    let keyword = ref('');

    const getApi = async () => {
      const result = await getResult(keyword.value);
      // list
      articles.value = result.list;

      // total
      total.value = result.total;
    }
    getApi();
  }
}

getResult()は仮の関数です。一覧を絞り込みで取得する関数を別途作成しましょう。結果を取得するgetApi()は、初期ロード時のために一度実行しておく必要があります。

watchに登録する

続いて、キーワードの入力に応じてAPIを叩くために、watchを登録します。

<script>
import { ref, watch } from 'vue'

export default {
  name: 'Articles',
  setup () {
    let total = ref(0);
    let articles = ref([]);
    let keyword = ref('');

    const getApi = async () => {
      const result = await getResult(keyword.value);
      // list
      articles.value = result.list;

      // total
      total.value = result.total;
    }
    getApi();

    watch(keyword, () => {
      getApi();
    })
  }
}

これで、inputのv-modelがkeywordなフォームの入力に変化があると、getApi()が実行されて、自動で一覧を書き換えてくれます。

変数をコンポーネントから使えるようにする

このままだと、setup関数で定義した変数にコンポーネントからアクセスができないので、returnで外に出します。

<script>
import { ref, watch } from 'vue'

export default {
  name: 'Articles',
  setup () {
    let total = ref(0);
    let articles = ref([]);
    let keyword = ref('');

    const getApi = async () => {
      const result = await getResult(keyword.value);
      // list
      articles.value = result.list;

      // total
      total.value = result.total;
    }
    getApi();

    watch(keyword, () => {
      getApi();
    })

    return {
      articles,
      keyword,
      total
    };
  }
}

これでsetup関数はおしまいです。

テンプレートに適用する

最後にテンプレート側で一覧を表示させます。

<tempalte>
<input type="text" name="keyword" placeholder="Input keyword" v-model="keyword" />

<ul>
  <li v-for="(a, ai) in articles" :key="'ai-' + ai">
  {{a}}
  </li>
</ul>

</tempalte>

これで、keywordの入力を受け付けると、articlesに更新がかかります。APIからデータを叩く場合は、UI/UX的には一度ローディングを立ち上げて、読み込んだ後に描画する方が良いかと思います。

Vue3でsetupを使って動的に一覧を絞り込む検索フォームを作って見ました。これに、前回書いたページング処理を追加すれば、ページ読み込みをしない、高速表示検索フォームができます。

Vue3のsetup関数でVue Routerを使ってページネーションを制御する

これまでは、watch、data、methodsなどを組み合わせて実装していたところが、setup関数で全て完結するのは非常に楽です。

これだけでもVue3にアップグレードする価値があるなぁと思いました。