[Nuxt.js]methodsで取得した変数の値をVuetifyのポップアップウィンドウで表示

①APIで取得した請求書リスト、ファイルリストデータをpages/invoice/index.vueで加工し、
②それをその子要素であるcomponents/molecules/InvoiceImport.vueでそのデータを受け取り
③選択した請求書種別によって表示させるファイルリストを変える
というところまでできていたのですが、
そのファイルデータをさらに子要素であるcomponents/molecules/InvoicePopupHeader.vueというポップアップウィンドウで表示させる…ということができていなかったので、その備忘録。

あくまで備忘録なので、細かいことまで書いていません。あしからず。

今はこの状態。

<!-- ファイルインポート -->
<template>
  <div>
    <v-card :class="CARD_PADDING" max-width outlined>
      <Title v-if="title != ''">{{ title }}</Title>
      <v-row>
        <v-col cols="2">
          <SelectBox
            v-model="fileType"
            :items="fileTypeItem"
            :change="selectChange"
            label="ファイル種別"
            outlined
          />
        </v-col>
        <v-col>
          <!-- :max-width="categocyMaxWidth" -->
          <v-dialog v-model="categoryDialogShow" :max-width="850" persistent>
            <template v-slot:activator="{ on, attrs }">
              <!-- <Button>ファイル更新日</Button> -->
              <v-btn
                color="primary"
                tile
                small
                v-bind="attrs"
                class="createBtn"
                v-on="on"
              >
                請求書を作成
              </v-btn>
            </template>

            <v-card class="mx-auto pa-4" outlined>
              <invoice-popup-header
                :month-select="true"
                :date-select="true"
                :initial-date="initialDate"
                :initial-month="initialMonth"
                :end-of-month="endOfMonth"
                title="請求書の新規作成"
              />

              <v-data-table
                :headers="headers"
                :items="fileList"
                item-key="fileName"
                class="elevation-1"
                hide-default-footer
              ></v-data-table>
              {{ fileList }}
              <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="primary" text @click="categoryCreateClose">
                  閉じる
                </v-btn>
                <Button>請求書作成</Button>
              </v-card-actions>
            </v-card>
          </v-dialog>
        </v-col>
      </v-row>  
      <v-row>
        <v-col cols="9">
          インポートファイル
          <v-radio-group v-model="selectFileType" class="__awide" row>
            <div
              v-for="(f, index) in dataFileTypes"
              :key="index"
              class="__tiny"
            >
              <v-radio :label="f.label" :value="f.value" class="pb-4"></v-radio>
            </div>
          </v-radio-group>
        </v-col>
      </v-row>
    </v-card>
  </div>
</template>

に対し、下記データセットを用意。すでに用意しているmethodも記しておきます。

<script>
export default {
  data() {
    return {
      dummyFileList: [
        {
          fileName: 'file01',
          updated: '2021-01-01',
        },
        {
          fileName: 'file02',
          updated: '2021-02-02',
        },
        {
          fileName: 'file03',
          updated: '2021-03-03',
        },
      ],
    }
  },
  methods: {
    selectChange(v) {
      this.selectedInvoiceCode = v
      const fileType = this.masterFileTypes
      this.dataFileTypes = fileType[v] // 選んだ請求書種別をdataFileTypesに代入

      // v-radio-groupにv-modelとしてselectFileTypeを設定
      for (let index = 0; index < this.dataFileTypes.length; index++) {
        const obj = this.dataFileTypes[index]
        this.selectFileType = obj.value
        break
      }
      console.log('selectFileType ==> ' + this.selectFileType)
    },
  },
}

</script>

vuetifyのv-data-tableは、computed内にheaders()としてテーブルヘッダーの値をオブジェクトとして入れておく必要があります。

<script>
  computed: {
    headers() {
      return [
        {
          text: 'ファイル名',
          align: 'start',
          sortable: false,
          value: 'fileName',
        },
        {
          text: '最終更新日',
          align: 'start',
          value: 'updated',
        },
      ]
    },
  },
</script>

このdummyFileListの中身を、親がAPIで受け取った内容に変更するのですが、キーの名前を変更した時は上記headersのvalue名も変えなければならないことに注意が必要です（まんまとハマった）。
このヘッダーのvalue名により、v-data-tableはtable bodyの値を紐付けています。

さて、ひとまずdummyさんにはどっか行ってもらいます。 v-data-tableの　:items="dummyFileList" を:items="fileList"とし、表示させるファイル名item-key="fileName"をここでは便宜上unchiとします。

<template>
  <div>
    <!-- 中略 -->
              <v-data-table
                :headers="headers"
                :items="fileList"
                item-key="unchi"
                class="elevation-1"
                hide-default-footer
              ></v-data-table>
    <!-- 中略 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      FileList: [] // 追加
      dummyFileList: [
        {
          fileName: 'file01',
          updated: '2021-01-01',
        },
        {
          fileName: 'file02',
          updated: '2021-02-02',
        },
        {
          fileName: 'file03',
          updated: '2021-03-03',
        },
      ],
    }
  }
}
</script>

先ほど申しました通り、、キーの名前を変更した時はheadersのvalue名も変えなければならないため、こちらも変更しておきます。

<script>
  computed: {
    headers() {
      return [
        {
          text: 'ファイル名',
          align: 'start',
          sortable: false,
          value: 'unchi', // unchiに変更
        },
        {
          text: '最終更新日',
          align: 'start',
          value: 'updated',
        },
      ]
    },
  },
</script>

いよいよメソッドを用意します。
セレクトボックスから選択したキーを元に、ラジオボタンでファイル種別が表示されるメソッドをすでに書いていたため、そのメソッドを利用してテーブルにも表示させるようにします。

<script>
  methods: {
    selectChange(v) {
      this.selectedInvoiceCode = v
      const fileType = this.masterFileTypes
      this.dataFileTypes = fileType[v]

      for (let index = 0; index < this.dataFileTypes.length; index++) {
        const obj = this.dataFileTypes[index]
        this.selectFileType = obj.value
        break
      }

      //ここから追加
      this.fileList = []　
      for (let index = 0; index < this.dataFileTypes.length; index++) {
        const obj = this.dataFileTypes[index]
        this.fileList.push({ unchi: obj.label, updated: '2021-03-03' })
      }
    },
</script>

以上です。

nuxtはpushやsliceなど、配列のメソッドを使用せずに=で代入すると、表示が反映されないことが結構あるそうで、注意が必要…とは上司のお言葉。ふうん。