每个产品的模态窗口 (Vue.js)

如何解决每个产品的模态窗口 (Vue.js)

我正在开发一个小型在线商店 (Vue.js) 我有几种不同名称和价格的产品。每个产品都有一个“详细信息”按钮。

当我点击“详细信息”按钮时，我想要一个显示该产品名称和价格的模式窗口。目前，我总是只显示第一个产品的数据。我不知道如何显示我点击的产品的数据。我大致理解你需要使用“this”，但到目前为止没有解决方案。我在 Modal 中使用 vue-js <slot></slot>。

在方法中：

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

我的按钮：

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

解决方法

鉴于语法，我假设您使用的是 Bootstrap 5。

您最好为产品详细信息模式创建一个组件 Vue 组件，您可以将产品作为道具传递给它，然后它会根据产品更改其内容。

如果您有要迭代的产品列表，那么您可以执行以下操作：

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

现在，当您单击详细信息按钮时，它会将所选产品设置为 data 项目，并将 showModal 设置为 true。然后将产品传递给模态组件，该组件可以显示基于该道具的详细信息：

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