我是 Vue 的新手，正在使用 Bootstrap 模式來顯示產(chǎn)品信息。我有網(wǎng)格容器，每個(gè)容器都有一個(gè)產(chǎn)品圖片、描述和兩個(gè)按鈕。More details >>單擊其中一個(gè)按鈕 ( ) 時(shí)，會(huì)彈出一個(gè)模式窗口，該窗口應(yīng)顯示與其所在網(wǎng)格完全相同的產(chǎn)品描述和圖片。<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);        });    },  }})區(qū)域 1、2 和 4 工作得很好，它們v-for分別根據(jù)每個(gè)網(wǎng)格容器的值和預(yù)期顯示產(chǎn)品數(shù)據(jù)。當(dāng)我點(diǎn)擊More details >>按鈕時(shí)，區(qū)域 3 是一個(gè)問題，我只看到一個(gè)褪色的黑屏。我不確定我在這里做錯(cuò)了什么，非常感謝一些幫助。