我是 Vue 的新手，正在使用 Bootstrap 模式來顯示產品信息。我有網格容器，每個容器都有一個產品圖片、描述和兩個按鈕。More details >>單擊其中一個按鈕 ( ) 時，會彈出一個模式窗口，該窗口應顯示與其所在網格完全相同的產品描述和圖片。<div id="myapp">  <h1> {{ allRecords() }} </h1>  <div class="wrapper" >    <div class="grid-container" v-for="product in products" v-bind:key="product.ID">      <div class="Area-1">        <img class="product_image" src="https:....single_product.jpg">       </div>      <div class="Area-2">        <div class = "amount">          {{ product.amount }}        </div>        {{ product.Description }}      </div>      <div class="Area-3">        <b-button size="sm" v-b-modal="'myModal'" product_item = "'product'">          More Details >>        </b-button>        <b-modal id="myModal" >          <h1> {{ product.Name }} </h1>          <h3> {{ product.Description }} </h3>        </b-modal>      </div>      <div class="Area-4">        <br><button>Buy</button>      </div>    </div>  </div></div>var app = new Vue({  'el': '#myapp',  data: {    products: "",    productID: 0  },  methods: {    allRecords: function(){      axios.get('ajaxfile.php')        .then(function (response) {          app.products = response.data;        })        .catch(function (error) {          console.log(error);        });    },  }})區域 1、2 和 4 工作得很好，它們v-for分別根據每個網格容器的值和預期顯示產品數據。當我點擊More details >>按鈕時，區域 3 是一個問題，我只看到一個褪色的黑屏。我不確定我在這里做錯了什么，非常感謝一些幫助。