rails7とvue3でサーチフィルター付きのtable作成

rails7とvue3でサーチフィルター付きのtableを作成していきます。検索バーに文字を入力するとそれにあった行だけ表示するというものです。

環境、条件

• rails7
• vue3
• options API

全体の流れ

今回の実装内容は下記

• railsのviewにjavascriptもhtmlも記載
• id:appを付与したdiv内にtable作成
• dataでformsに配列を。このformsは下に関連付けされたapplicationsがあります。このapplicationsを1行ずつ展開
• v-forでformsを繰り返し
• そのformsからapplicationsをさらにv-forで再度展開
• v-for=”application in filteredApplications(form)”でfilteredApplications関数を発火
• form.form_applications.filter(applicationで配列からapplicationを一つずつみていってapplication.name.toLowerCase().indexOf(this.search.toLowerCase()) > -1;の条件にあえばform.form_applicationsの配列に格納

コード

    <div id="app">
        <div v-for="form in forms" :key="form.id">
          <h2>
            {{ form.name }}問い合わせ一覧
          </h2>
          <input type="text" v-model="search">
          <div>
            <div class="section_row flex flex-row" v-for="application in filteredApplications(form)" :key="application.id">
              <a href="">
                {{ application.name }}
              </a>
              <td>{{ application.email }}</td>
            </div>
          </div>
        </div>
    </div>

    <script type="module">
      import { createApp } from 'vue';
      const app = createApp({
        data() {
          return {
              forms: <%= @forms.to_json(include: :form_applications).html_safe %>,
              search: ''
          };
        },
        methods: {
          filteredApplications(form) {
              return form.form_applications.filter(application => {
                  return application.name.toLowerCase().indexOf(this.search.toLowerCase()) > -1;
              });
          }
        }
      }).mount('#app');
    </script>

コードは上記になる。

dataメソッド

options apiで使われる関数で最初のステータスを定義するもの。上記コードではformsとsearchの初期の値を定義している

filteredApplications

methods: {
          filteredApplications(form) {
              return form.form_applications.filter(application => {
                  return application.name.toLowerCase().indexOf(this.search.toLowerCase()) > -1;
              });
          }
        }

formで引数をひっぱってきてその下に関連付けしているform_applicationsにfilterで条件にあうもののみを配列に入れるようにしています。

application =>はアロー関数でform_applications配列を個別にしたものがapplication。

return application.name.toLowerCase().indexOf(this.search.toLowerCase()) > -1;

この条件にあえばapplicationをform.form_applicationsに再度入れる。これにより入れ替わった配列を

v-for="application in filteredApplications(form)"

上記のv-forで回して繰り返し処理を行う。

アロー関数の内の処理は下記

• application.name.toLowerCase().indexOf(this.search.toLowerCase()) > -1 という式が評価されます。この式は、applicationオブジェクトのnameプロパティを小文字に変換し、それがsearchプロパティ（小文字に変換された）に含まれているかどうかをチェックします。
• indexOfメソッドは、指定された値が見つかった場合にそのインデックスを返し、見つからなかった場合は-1を返します。したがって、この式はapplication.nameがthis.searchに含まれている場合にtrueを返し、含まれていない場合にfalseを返します。