起きたこと

todoアプリの編集機能を作成中、編集機能を押すと追加したtodoアプリ分モーダルが表示されてしまうというバグが発生。

よって、編集ボタンを押すと必ず２つ目のモーダルが表示されてしまっていた。

関連ある技術

Vue3
Vuetify3

解決したいこと

1つ1つのtodoのモーダルを表示できるようにしたい

考えるべきこと

今回は、なぜ2重に表示されてしまうのかを考える必要がある。

まず、todo自体の挙動の確認からすると…

todo追加
todoが画面に表示される
todo編集ボタンを押す
モーダルが表示される
・キャンセルボタンを押して閉じる
・更新ボタンを押して閉じる
モーダルを閉じる

単体のtodoを作成する手順はこんな感じ。

次に、コードの確認。

<template> 
<v-dialog
   v-model="showDialog"
   persistent
   width="1024"
 >
  <template v-slot:activator="{ props }">
    <v-btn
      class="ma-2"
      color="blue"
      height="40"
      type="submit"
      v-bind="props"
     >
	     編集
    </v-btn>
	</template>
...
</v-dialog>
...
</template>
<script setup>
import { computed, ref } from 'vue';
import { useStore } from 'vuex';

const store = useStore();
const newTodoTheme = ref("");
const todoValues = computed(() => store.getters.todoList);
const showDialog = ref(false);
...
</script>

vuetifyの公式から、ダイアログがあったので、そのコードで必要な部分だけ抽出。

上記コードで、<template v-slot:activator="{ props }"> の部分は編集ボタンを押すとトリガーとなり、モーダル（特定のコンポーネント）が表示（アクティベート）される処理となっている。

showDialogで、refを使用していることからリアクティブにtrue/falseとすることができるが、このままだと単一のtodoしか指定ができない。

ここでのキーポイントは

showDialogをどう宣言していくかということ
各todoのindex番号を用いる

todoを複数追加ということは、オブジェクトでキーを各todoのインデックス、バリューに各todoのインデックスのbooleanを持たせればいいので、下記のような宣言に変更。

const showDialog = ref({});

そして、今回は、親コンポーネントから値を受け取ってきたりすることはないので、template自体の数を少なくし可読性を良くするために、先ほどのコードも修正していくこととする。

編集ボタンを押したときに、clickイベントが発火し、各要素のインデックスを渡しやすいなと考えたので、以下のように変更。

<template>
<v-btn
  class="ma-2"
  color="blue"
  height="40"
  type="submit"
  @click="handleOpenModal(index)"
>
    編集
</v-btn>
...
</template>

<script setup>
...
const showDialog = ref({});
...
const handleOpenModal = (index) => {
  showDialog.value[index] = true;
}

引数で、indexを渡すことで、各要素のインデックスの制御もしやすくなった。

ちなみに、showDialog.valueとすることで、vue3の場合は要素にアクセスできる。（vue2からvue3やってる人にとっては、初見殺しだったりする）

上記コードで、わかりづらい人向けにconsole.logで値を出してみると下記のようになります↓↓↓

オブジェクト内で、インデックス毎に管理されているのがこれでわかるかと思います。

そして、再度挙動の確認をしてみると….

でけた！！！！

今回のバグが起きた原因としては、

todoが複数になったときに対応してなかった
各todo毎にモーダルのデータ管理をしてあげなかった

以上が原因だったと思います。

vue3まだまだ理解が足りぬと感じることが多いですが、僕と同じような状況で困っている人がいたら、ぜひこの記事を参考にしてみてください！