[Vuejs]-Vue send data to modal

by

1👍

✅

I would recommend using the TaskForm component only once, this can be achieved using props and emits like this

// for parent component
<template>
<ChildComponent v-for="item in items" key={item.id} :item="item" @edit-item="showEditModal" />
<PopUpComponent v-if="selectedItem !== null" :selected-item="selectedItem" @close="selectedItem = null" />
</template>
<script setup>
import {ref} from "vue";
const selectedItem = ref(null);
function showEditModal(item) {
selectedItem.value = item;
}

</script>

For child component we need to define an emit named edit-item that will call this function

// for child
<template>
..other data
<button @click="editItem">edit</button>
</template>
<script setup>
const emit = defineEmits(["edit-item"]);

function editItem() {
emit('edit-item', props.item) // this will call the @edit-item in parent and that function will set a selectedItem non-null value which will render the modal
}
</script>

Similarly for a close function in modal

<template>
...
<button @click="closeModal">close</button>
</template>
<script setup>
const emit = defineEmits(["close"])
function closeModal() {
emit("close")
}
</script>
👤Wasiq Bin Zahid

Leave a comment