Modal window for each product (Vue.js)

Question

I'm developing a small online store (Vue.js) I have several products with different names and prices. Each product has a "Details" button.

I want a modal window with the names and prices of this product to appear when I click on the "Details" button. At the moment, I always only show the data from the first product. I do not know how to display the data of the product that I clicked on. I roughly understand that you need to use "this", but so far no solution comes. I use vue-js <slot></slot> in Modal.

In methods:

showModal() {
  let myModal = new bootstrap.Modal(
    document.getElementById('exampleModal'),
    {}
  );
  myModal.show();
},

My button:

<button @click="showModal">Details</button>

Answer 1

Given the syntax, I’m assuming you’re using Bootstrap 5.

You’d be better off creating a component Vue component for the product details modal that you can pass a product to as a prop, and then it’ll change its content based on the product.

If you have a list of products that you’re iterating over, then you can do something like this:

<!-- ProductList.vue -->
<template>
    <ul>
        <li v-for="product in products" v-bind:key="product.id">
            <span>{{ product.name }}</span>
            <button v-on:click="showDetails(product)">Details</button>
        </li>
    </ul>
    <portal to="modals" v-if="showModal">
        <product-details-modal
            v-bind:product="product"
            v-bind:show="showModal"
            v-on:hide="showModal = false"
        />
    </portal>
</template>

<script>
import ProductDetailsModal from './ProductDetailsModal.vue';

export default {
    components: {
        ProductDetailsModal,
    },
    data() {
        return {
            product: null,
            products: [],
            showModal: false,
        };
    },
    methods: {
        showDetails(product) {
            this.product = product;
            this.showModal = true;
        },
    },
    mounted() {
        // Load products from API or something
        // Save array of product results to this.products
    },
};
</script>

Now when you click the details button, it’ll set the selected product as a data item, as well as showModal true. The product is then passed to the modal component, which can show the details based on that prop:

<!-- ProductDetailsModal.vue -->
<template>
    <div class="modal fade" id="product-details-modal" ref="modalElement">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="product-details-modal-title">Product Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>Product name: {{ product.name }}</p>
                    <p>Product price: {{ product.price }}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { Modal } from 'bootstrap';
 
export default {
    data() {
        return {
            modalElement: null,
        };
    },
    mounted() {
        this.modalElement = new Modal(this.$refs.modal);

        this.modalElement.addEventListener('hide.bs.modal', this.$emit('hide'));

        if (this.show) {
            this.modalElement.show();
        }
    },
    props: {
        product: {
            required: true,
            type: Object,
        },
        show: {
            default: false,
            required: false,
            type: Boolean,
        },
    },
    watch: {
        show(show) {
            if (this.modalElement) {
                show ? this.modalElement.show() : this.modalElement.hide();
            }
        },
    },
};
</script>