Passing information from Vue to a modal

Question

Passing information from Vue to a modal

I'm working with 3 components: TaskList, TaskItem, and TaskForm.

Within the TaskList component, there is a loop that renders all the data in TaskItem. Each TaskItem has an edit button meant to open a TaskForm modal (using bootstrap) displaying the specific task data.

TaskForm.vue

  
    <div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" id="formModal">
        // Modal content here
    </div>

TaskList.vue

  
    <div class="container">
        // TaskItem loop
    </div>

TaskItem.vue

  
    <div class="row align-items-center p-2 border rounded mt-2">
        // Task details
        <button class="btn btn-primary" @click="showForm = !showForm" data-bs-toggle="modal" data-bs-target="#formModal">
            <i class="bi bi-pencil-square"></i>
        </button>
    </div>

    <TaskForm v-if="showForm" :task="props.task"/>

However, I've encountered an issue where each modal displays the first task's name instead of the selected one.

While this approach works for now, I believe there might be a better way to achieve my goal (editing a list item). If anyone has a more efficient solution, I would love to hear it.

javascript vue.js bootstrap-modal bootstrap-5

Answer 1

Answer №1

If you want to optimize your code, consider using the TaskForm component just once by utilizing props and emits in the following manner:

// 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>

To enable the child component to trigger the modal, define an emit named edit-item as shown below:

// Child Component
<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 component which will then render the modal with selected item
}
</script>

Similarly, implement a close function for the modal:

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

Answer 2

If you want to optimize your code, consider using the TaskForm component just once by utilizing props and emits in the following manner:

// 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>

To enable the child component to trigger the modal, define an emit named edit-item as shown below:

// Child Component
<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 component which will then render the modal with selected item
}
</script>

Similarly, implement a close function for the modal:

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

Passing information from Vue to a modal

Answer №1

Similar questions

Display a list of dates within a specified range using the ng

Using alphabets or Roman numerals as an index in a Vuejs For loop: A step-by-step guide

What steps can you take to convert your current menu into a responsive design?

How can I resolve the Error: Element type is invalid?

What are the steps to organize an array of objects by a specific key?

Tsyringe - Utilizing Dependency Injection with Multiple Constructors

Tips on obtaining the data count from using the $.get method

jQuery is working perfectly on every single page, with the exception of just one

Tips for transferring parameters between functions in AngularJS

The second asynchronous function relies on the completion of the first

Using JavaScript code to sift through and eliminate irrelevant data

React Application Issue: Unable to successfully redirect to the homepage upon logging in

Saving Backbone.js Collection as Text File on HDD & Re-importing Data

After logging in, I am unable to redirect to another PHP page as the login form simply reloads on the same page

Using the spread operator in ES6 allows for arguments to be placed in a non-con

Codeigniter code to retrieve dynamic data in a select box

Fetch a single random profile image from a Facebook user's list of friends using Javascript

"Data passed to a JavaScript callback function may result in an undefined

"PHP Dilemma: Navigating the Ajax Button Press Situation

The tooltip feature in jQuery is experiencing some stuttering issues