【Vue.js】モーダル内の要素にテーブルの行ごとのIDを渡したい

Question

実現したいこと

Vue.jsでモーダルの中の要素にテーブルの行ごとのIDを渡したい

状況

1. Vue Materialのテーブルコンポーネントを使用
2. Modalコンポーネントを作成し、ラップした要素をモーダル表示できるように実装
3. ChildFormコンポーネントを作成し、Modalコンポーネントでラッピング
4. Parent.vueでthis.$refs.childを使用し、ボタンをクリックすると子のModalにあるopenModalを発火させる（こちらを参照にしました）

↑のような状況で親であるParent.vueからChildForm.vueにIDデータを渡したい。

問題の箇所

ChildForm.vueにて、propsとして渡したitemIdを表示させようとしたが、常にID『2』がモーダルフォームに表示される

<template>
  <div>
    {{ itemId }}
  </div>
</template>

問題箇所のアニメーションgif

![

該当のソースコード

【Parent.vue】

<template>
  <div>
    <md-table v-model="products">
      <md-table-row slot="md-table-row" slot-scope="{ item }">
        <md-table-cell md-label="ID">{{ item.id }}</md-table-cell>
        <md-table-cell md-label="ユーザー">{{ item.user }}</md-table-cell>
        <md-table-cell md-label="アクション">
          <button @click="onClickOpenModal">ボタン</button>
          <Modal ref="child"> ←親から子のメソッドにアクセスできるように実装
            <template #content>
              <ChildForm :item-id="item.id" />
            </template>
          </Modal>
        </md-table-cell>
      </md-table-row>
    </md-table>
  </div>
</template>

<script lang="ts">
import ChildForm from './ChildForm.vue'
import Modal from './Modal.vue'
import Vue from 'vue'

type RefInterface = Vue & {
  openModal(): void
}

export default Vue.extend({
  name: 'Parent',
  components: {
    Modal,
    ChildForm,
  },
  data() {
    return {
      products: [
        {
          id: 1,
          user: 'ユーザー1',
        },
        {
          id: 2,
          user: 'ユーザー2',
        },
      ],
    }
  },
  methods: {
    onClickOpenModal() {
      const child = this.$refs.child as RefInterface
      child.openModal()
    },
  },
})
</script>

【Modal.vue】

<template>
  <div>
    <md-dialog :md-active.sync="active">
      <md-dialog-content>
        <slot name="content" />
      </md-dialog-content>
    </md-dialog>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'Modal',
  data() {
    return {
      active: false,
    }
  },
  methods: {
    openModal() {
      this.active = true
    },
  },
})
</script>

【ChildModal.vue】

<template>
  <div>
    {{ itemId }} ←IDを表示するも常に『2』のIDが表示されてしまう
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'ChildForm',
  props: {
    itemId: {
      type: Number,
      default: null,
    },
  },
})
</script>

試したこと

Modalコンポーネント側でボタンを設置

【Modal.vue】

<template>
  <div>
    <md-dialog :md-active.sync="active">
      <md-dialog-content>
        <slot name="content" />
      </md-dialog-content>
    </md-dialog>
    <button @click="openModal">ボタン</button>
  </div>
</template>

↑のようなコードにした所、IDはデータに応じて表示されましたが、ボタンも今後種類が増えてCSS等変えていくと考えると、
0. ボタンもModalの外に設置する
0. Modalはあくまでモーダルビューを出すだけで、モーダル表示をさせたい要素をラッピングするだけの役割

で実装出来ればと考えているのですが、うまくいきませんでした。

ご教示いただきたいこと

テーブルコンポーネントで子コンポーネントに行ごとのIDを渡す方法

良い書き方が中々思い浮かばず詰まった末、質問させていただきました。
お手数をおかけし大変恐縮ですが、何卒宜しくお願い申し上げます。

Comments

[plasticgrammer]

挙動について質問させてください。
onClickOpenModalで参照している this.$refs.child は配列になっていませんか？
複数行の場合、ref="child"が複数存在するものと思いますが、そのときには配列になってくれそうな気がしていますので確認まで。

[im05ttbbh]

ご返信が遅くなってしまい誠に申し訳ございません。
おっしゃるように、this.$refs.childは複数アイテムが存在しますので、一つ一つユニークな識別子を与える必要がありました。

別の方のご回答のコードにはなってしまいますが、以下のようなコードでユニークな識別子を与えることで問題を解決することができました。
<Modal :ref="'child_'+ itemid">

ご指摘をいただき誠に有難うございました。

Answer 1

モーダルが複数できるのはいいとして、それらのrefが全て"item"になっています。同名のrefが複数存在するときにthis.refsから参照するときに呼び出されるのは最後に宣言されたものになります。
つまり、id1のボタンを押したときにref="item"のモーダルを参照すると最後に宣言されているid2の行のモーダルが呼び出され表示されています。

以下のようにrefを動的に宣言してあげれば意図した挙動になるかと思います。
コードは殴り書きで書いてるので動くかは保証出来ないですが、イメージとしてはこんな感じです。

<md-table-cell md-label="アクション">
  <button @click="onClickOpenModal(item.id)">ボタン</button>
  <Modal :ref="'child_'+ itemid"> ←親から子のメソッドにアクセスできるように実装
    <template #content>
      <ChildForm :item-id="item.id" />
    </template>
  </Modal>
</md-table-cell>


onClickOpenModal(id) {
    const child = this.$refs['child_'+ id] as RefInterface
    child.openModal()
},

Comments

[im05ttbbh]

ご返信が遅くなってしまい誠に申し訳ございません。

お教えいただいたコードでバッチリ動きました！！
テーブルでアイテムが複数存在するので、refで参照する値はユニークな識別子が必要ですよね。

お教えいただきパッと解決はしましたが、しばらくハマっていた問題でしたので非常に助かりました。
また、自身でもthis.$refsをもう少し注意深くデバックすれば解決できたのではないかという反省もありますので、なぜ動かないのかをもう少し考えられるように精進したいと存じます。

この度は誠に有難うございました。心より感謝申し上げます。