Vuetifyでfor文の中にモーダル(v-dialog)を実装する方法

## なぜ書いた？
単純にモーダルをfor文の中に入れたら、常に最後の繰り返しの値を使ってmodalを開かれてしまい、繰り返しのモーダルごとで別々のinputの値を準備できず苦しんだため、自分以外にもそういう方がいたとき何かの参考になればと思って書きました。


## 結論（ソースコード）

```vuejs:for文を反映したモーダルの実装コード（vue3）
<script setup>
import { reactive, ref } from "vue";

const new_plans = reactive([
  { number: 0, bool: true },
  { number: 1, bool: false },
  { number: 2, bool: true },
]);

const dialog = ref(false);
let new_plan_for_dialog = ref(null);

const onClickBtn = (new_plan) => {
  new_plan_for_dialog.value = new_plan; //dialogの変数に要素を渡している
  dialog.value = true;
};
</script>

<template>
  <div v-for="(new_plan, index) in new_plans" :key="index">
    <v-btn @click.stop="onClickBtn(new_plan)"
      >ボタン{{ index }}</v-btn
    >
  </div>

  <v-dialog v-model="dialog" width="auto" activator>
    <v-card>
      <v-card-title>プランの設定・編集 </v-card-title>
      <v-card-text>
        Check
        <v-checkbox
          v-model="new_plan_for_dialog.bool"
          :label="`number${new_plan_for_dialog.number}は${new_plan_for_dialog.bool}`"
        ></v-checkbox>
      </v-card-text>
      <v-card-actions>
        <v-btn color="primary" block @click="dialog = false"
          >Close Dialog</v-btn
        >
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>
```

※成功している画面の様子（ボタンごとに該当しているモーダルが表示されているのが見て取れます）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555157/33a2c623-9a49-c6fb-46ef-0689c0ed0280.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555157/8f9b0a48-dce9-1693-f83a-fda7991dd126.png)



## 解説
上記のロジックはモーダルをfor文の個数分準備するのではなく、変数箇所だけ入れ替えて表示できるようになっています。

こうすることでコンパイル後のファイルのサイズ（DOMのサイズ）を小さくしつつ、inputしたい値はしっかり変数に格納できる最も効率の良い記述となっています。



## 参考にさせていただいた記事
- [大元の記事(vue2での記述となっています)](https://teratail.com/questions/213378)

- [上記を参考にして書かれた記事](https://scrapbox.io/kidaaam-92022284/Vuetify%E3%81%AEv-dialog%E3%82%92v-for%E3%81%AE%E4%BB%BB%E6%84%8F%E3%82%A2%E3%82%A4%E3%83%86%E3%83%A0%E3%81%94%E3%81%A8%E3%81%AB%E7%94%A8%E6%84%8F%E3%81%99%E3%82%8B)

- [公式リファレンス](https://vuetifyjs.com/en/components/dialogs/)（今回は使い所がなかったですが一応公式は載せておきます）


## 余談（失敗したソースコード）
ちなみに筆者は下記のようなソースコードを書いて動かず苦しみました。（[参考にしてうまく使いこなせなかった公式リファレンスのリンク](https://vuetifyjs.com/en/components/dialogs/)）
```vuejs:うまくいかなかったソースコード（参考）
<script setup>
import { reactive, ref } from "vue";

const new_plans = reactive([
  { number: 0, bool: true },
  { number: 1, bool: false },
  { number: 2, bool: true },
]);
const dialog = ref(false);
</script>
<template>
  <Default active-menu="accepted_authority_parents">
    <div v-for="(new_plan, index) in new_plans" :key="index">
    <!-- （失敗箇所ここから）※ダイアログをforと同じ個数準備してそれぞれ表示させようとしている -->
      <v-dialog v-model="dialog" width="auto">
        <template v-slot:activator="{ props }">
          <v-btn v-bind="props">ボタン{{ index }}</v-btn>
        </template>
        <v-card>
          <v-card-title>プランの設定・編集 </v-card-title>
          <v-card-text>
            Check
            <v-checkbox
              v-model="new_plan.bool"
              :label="`number${new_plan.number}は${new_plan.bool}`"
            ></v-checkbox>
          </v-card-text>
          <v-card-actions>
            <v-btn color="primary" block @click="dialog = false"
              >Close Dialog</v-btn
            >
          </v-card-actions>
        </v-card>
      </v-dialog>
    <!-- （失敗箇所ここまで） -->
    </div>
  </Default>
</template>
```

※ボタン０を押してもボタン２のモーダル（一番最後の繰り返しのモーダル）が出てしまう様子
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555157/b0ef2b28-59fa-60e0-4bfc-e0b9dabb8d7f.png)

こちらはおそらく`activator="{ props }"`がうまく使えておらず、モーダルを使う指定の変数がわからないから最後の`new_plan`を使われているのではないかと思われます。