前回の記事

kei-s-lifehack.hatenablog.com

Firebase と Nuxt Axios で input から id と data を取り込んだ追加と上書きを試した

最終的にやりたいこと

モーダルカードのエディタを作りたい

今回やること

リンク付きのデータの一覧画面と、そこから詳細のモーダルカードを開けるようにする

友人情報管理システムとして公開するためのファイル構造とかを作っていく

GitHub にあげて、Vuetify をセットする

github.com

npm install @nuxtjs/vuetify -D

これで入れて

  buildModules: [
    '@nuxtjs/vuetify',
  ],

nuxt.config.js のビルドするモジュールに追加する

Vuetify の動作確認

v-btn をつけて

f:id:kei_s_lifehack:20210829201212p:plain

vuetify が動いていることを確認

一覧を作る

リスト部分を v-simple-table に置き換える

github.com

これに置き換える

    <v-simple-table>
      <template v-slot:default>

...

      </template>
    </v-simple-table>

v-simple-tabe と template のタグでテーブル全体を囲って

その中に

        <thead>
          <tr>
            <th>
              email
            </th>
            <th>
              name
            </th>
            <th>
              tel
            </th>
          </tr>
        </thead>

table head を作る。見出し。

横の table row を一つ作って

その中に table header を作っていく。

email, name , tel, の三種類。

        <tbody>
          <tr
            v-for="(data, key) in json_data" :key="key"
          >
            <td>
              {{ key}}
            </td>
            <td>
              {{ data.name}}
            </td>
            <td>
              {{ data.tel}}
            </td>
          </tr>
        </tbody>