Vue组件通信问题：点击商品列表按钮打开对应详情模态框

Hey AlyssaAlex, let's get this sorted out step by step! The main hurdles here are missing state for your selected product and proper communication between your listing and modal components. Here's how to make it work smoothly:

1. Fix the Product Listing Component #

First, we need to add the missing chosenProduct state to track which product the user clicked. We'll also switch to programmatic modal control (instead of relying only on v-b-modal) to make sure we set the product data before opening the modal. Plus, we'll include the modal component as a child here so we can pass data to it.

<template>
  <div class="content">
    <!-- Include your modal component as a child -->
    <ProductModal :chosen-product="chosenProduct" ref="productModal" />
    
    <div class="nested" v-for="product in products" :key="product.id">
      <div class="one"><span>{{product.Name}}</span></div>
      <div class="two">
        <img src="src/assets/shape.svg" style="height: 80px; width: 80px;">
        <span>-{{ product.Reduction_percentage }}%</span>
      </div>
      <div class="three"><span>{{ product.Short_Description }}</span></div>
      <div class="four">
        <b-btn @click="openProductModal(product)">查看详情</b-btn>
      </div>
    </div>
  </div>
</template>

<script>
// Import your modal component (adjust the path if needed)
import ProductModal from './ProductModal.vue'

export default {
  components: {
    ProductModal
  },
  data () {
    return {
      products: [
        {id: 1, Name: 'Product 1', Reduction_percentage: 30, Short_Description:"Something", Description:"Something more"},
        {id: 2, Name: 'Product 2', Reduction_percentage: 33, Short_Description:"Something", Description:"Something more"},
        {id: 3, Name: 'Product 3', Reduction_percentage: 23, Short_Description:"Something", Description:"Something more"},
        {id: 4, Name: 'Product 4', Reduction_percentage: 77, Short_Description:"Something", Description:"Something more"},
        {id: 5, Name: 'Product 5', Reduction_percentage: 99, Short_Description:"Something", Description:"Something more"},
      ],
      chosenProduct: null // Add this to track the selected product
    }
  },
  methods: {
    openProductModal(product) {
      this.chosenProduct = product; // Set the selected product first
      this.$refs.productModal.showModal(); // Then open the modal
    }
  }
}
</script>

2. Update the Modal Component #

Next, we'll add a prop to receive the selected product from the listing, and add methods to control the modal's visibility. We'll also fix the conditional rendering to avoid errors when no product is selected.

<template>
  <b-modal id="productModal" :title="chosenProduct?.Name" ref="modal">
    <div class="inner-container" v-if="chosenProduct">
      <div class="inner-nested">
        <div class="inner-one"><br>{{chosenProduct.Description}}</div>
        <div class="inner-two">-{{ chosenProduct.Reduction_percentage }}%</div>
        <div class="inner-three"><button>立即购买</button></div>
      </div>
    </div>
  </b-modal>
</template>

<script>
export default {
  props: {
    chosenProduct: {
      type: Object,
      default: null
    }
  },
  methods: {
    showModal() {
      this.$bvModal.show('productModal');
    },
    hideModal() {
      this.$bvModal.hide('productModal');
    }
  }
}
</script>

Key Things to Note: #

• Component Communication: We're using parent-to-child props to pass the selected product data between components—this is the simplest way to handle this kind of interaction.
• Programmatic Control: Using this.$bvModal.show/hide ensures the modal only opens after we've set the product data, so you won't see empty content.
• Optional Chaining: chosenProduct?.Name prevents errors when the modal loads before any product is selected (it safely returns undefined instead of throwing an error).
• Unique Key in v-for: Always add a :key with a unique value (like the product ID) to v-for loops—it helps Vue track elements efficiently and avoids unexpected behavior.

内容的提问来源于stack exchange，提问作者AlyssaAlex