Vue.jsでモーダルの状態を親コンポーネントで動的に管理したい

Question

実現したいこと

Vue.jsでモーダルの状態を親コンポーネントで動的に管理したい

状況

1. Vue Materialのテーブルコンポーネントを使用
2. Modalコンポーネントを作成し、ラップした要素をモーダル表示できるように実装（今回はFormコンポーネントをラッピング）
3. Parent.vueでmodalStateを定義し、Parent.vueで子であるモーダルの状態を管理

↑のような状況で親であるParent.vueでモーダルの状態を保持し、ボタンを押すことで、子のモーダルが表示されるようにしたい。

問題の箇所

Parent.vueで定義したモーダルの状態を子であるModal.vueに渡すと、全てのモーダルが表示されてしまう。

【Modal.vue】

<md-dialog :md-active.sync="modalState"> ←全てのモーダルがtrueになってしまう
  <md-dialog-content>
    <slot name="content" />
     {{ itemId }}
  </md-dialog-content>
</md-dialog>

問題箇所のアニメーション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="modalStateTrue">モーダル表示</button>
          <Modal :item-id="item.id" :modal-state="modalState"> ←モーダルの状態をpropsで渡す
            <template #content>
              <Form :item-id="item.id" /> ←modalStateがtrueならフォームを表示させる
            </template>
          </Modal>
        </md-table-cell>
      </md-table-row>
    </md-table>
  </div>
</template>

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

export default Vue.extend({
  name: 'Table',
  components: {
    Modal,
    Form,
  },
  data() {
    return {
      products: [
        {
          id: 1,
          user: 'ユーザー1',
        },
        {
          id: 2,
          user: 'ユーザー2',
        },
      ],
      modalState: false,
    }
  },
  methods: {
    modalStateTrue() {
      this.modalState = true
    },
  },
})
</script>

【Modal.vue】

<template>
  <div>
    <md-dialog :md-active.sync="modalState"> ←全てのモーダルがtrueになってしまう
      <md-dialog-content>
        <slot name="content" />
        {{ itemId }}
      </md-dialog-content>
    </md-dialog>
  </div>
</template>

<script>
import Vue from 'vue'

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

【Form.vue】

<template>
  <div id="itemId">
    <input />
  </div>
</template>

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

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

試したこと

親から子であるModalに対してユニークなIDを渡し、DOM要素のIDとして追加する

【Parent.vue】

<button @click="modalStateTrue(item.id)">モーダル表示</button>
<Modal :item-id="item.id" :modal-state="modalState.state"> ←propsのitemIdを使用
  <template #content>
    <Form :item-id="item.id" />
  </template>
</Modal>

【Modal.vue】

<md-dialog :id="itemId" :md-active.sync="modalState"> ←要素にユニークなIDを与える
  <md-dialog-content>
    <slot name="content" />
    {{ itemId }}
  </md-dialog-content>
</md-dialog>

↑のようなコードにした所、IDはモーダルアイテムごとに渡っていることを確認できましたが、
全てのモーダルが一度で表示される状態は変わりませんでした。

ご教示いただきたいこと

Vue.jsでモーダルの状態を親コンポーネントで管理する方法

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

【追伸】
↓以前似たような質問をしておりますが、そちらでは親から$refを使用して子のメソッドを操作する質問でしたが、今回は親で状態管理の質問になります。

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

応用が効かずに誠に恥ずかしい限りなのですが、ご指導賜りますようお願い申し上げます。

Answer 1

itemオブジェクトにshow_modal default/falseみたいなフラグを足してはどうでしょうか。
dataに入れる前にフラグを追加しておくと良いです。

Comments

[im05ttbbh]

返信が遅くなり申し訳ございません。

方法をご教示いただき誠にありがとうございました！
自己解決方法にも記載しましたが、ユニークなidを与えることで解決することができました。
ヒントをいただけたおかげで解決できましたので、重ねて御礼申し上げます。

Answer 2

modalStateの定義をオブジェクトにし、テーブルごとにユニークなmodalStateを作成することにより解決できました。なお、Modal.vueは使わなくなったので削除しています。

【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="$set(modalState, item.id, true)">モーダル表示</button> ←変更箇所
          <md-dialog :md-active.sync="modalState[item.id]"> ←変更箇所
            <Form :item-id="item.id" />
          </md-dialog>
        </md-table-cell>
      </md-table-row>
    </md-table>
  </div>
</template>

<script lang="ts">

export default Vue.extend({
  ---略---

  data() {
    return {
      modalState: {},
    }
  },

  ---略---
})
</script>