👩‍💻

Vue.js3でTODOリストを実装⑤

に公開
Vue 3
備忘録
学習用
idea

勉強の備忘録として記事を書いてます。
Vue.jsでTODOリストを開発していきます。Geminiでコード生成して、不明点や疑問点はchatGPTを頼り、補足してもらうような形で開発を進めました。
アウトプットして自分の中の知識を固めたいという思いで書いていますが、誰かのために役に立てれば嬉しいです。

今回は「削除ボタンを押したらモーダルが表示される」子コンポーネントConfirmModal.vueのコードをまとめていきます。

🐔 親コンポーネント(App.vue)

App.vue
<template>
  <ConfirmModal
    :is-visible="isModalVisible"
    @confirm="deleteTodoConfirmed"
    @cancel="closeModal" />
</template>

🐤 子コンポーネント(ConfirmModal.vue)

ConfirmModal.vue
<script setup>
defineProps({
    isVisible: {
        type: Boolean,
        required: true
    }
});

const emit = defineEmits(['confirm', 'cancel']);
</script>

definePropsで親から値を受け取るためのPropsを定義する。今回は、表示・非表示の切り替えのためBoolean真偽値にする。

ConfirmModal.vue
<template>
    <Teleport to="body">
        <div v-if="isVisible">
            <div>
                <p>削除してよろしいですか？</p>
                <div>
                <button @click="emit('confirm')">
                    はい</button>
                <button @click="emit('cancel')">
                    いいえ</button>
                </div>
            </div>
        </div>
    </Teleport>
</template>

子コンポーネントから親にイベントを送るのはconfirm(削除を確定したとき)とcancel(キャンセルしたとき)

<Teleport to=" ">
Vue3の機能でコンポーネントを指定したDOMの場所をワープ(浮かせて)描写できるタグ。レイアウトの崩れを防ぐことができる。

to="body"することでbody直下に描画することで重ねて表示することができる。htmlやidでも指定することは可能。

v-if="isVisible"
モーダルの表示・非表示を切り替える条件。親から渡されたisVisibleがtrueのときだけモーダルを表示する。

👻 TodoList.vueの削除ボタンとの連携

  1. TodoList.vueの削除ボタン
    ↓ emit('delete-todo', todo.id)"
  2. App.vueのopenModal(id)が呼ばれる
    ↓ isModalVisible.value = true;
  3. ConfirmModal.vueが表示される
  4. 「はい」を選択でemit('confirm')で親へ信号を送る
    → App.vueのdeleteTodoConfirmed()を実行
    → closeModal()を実行
  5. 「いいえ」を選択でemit('cancel')で親へ信号を送る
    → closeModal()を実行

Discussion