如何根据 v-for 值在模态窗口（单击按钮时）上获取所选数据？

Question

我是 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 是一个问题，我只看到一个褪色的黑屏。我不确定我在这里做错了什么，非常感谢一些帮助。

Answer 1

添加属性 selectedProduct，然后在 More Details 按钮单击事件上，将当前产品分配给 selectedProduct 成员，如下所示：

HTML

  <div class="Area-3">

    <b-button size="sm" v-b-modal="'myModal'" 

             @click="selectProduct(product)">More Details >> </b-button>    

    <b-modal id="myModal">

             <h1> {{ this.selectedProduct.Name }} </h1>

             <h3> {{ this.selectedProduct.Description }} </h3>

    </b-modal>

  </div>

Javascript：

var app = new Vue({

 'el': '#myapp',

 data: {

    products: "",

    productID: 0,

    selectedProduct: {Name: '', Description: '', Amount:0}

 },

 methods: {

   allRecords: function(){

   ...

   },

   selectProduct: function(product)

   {

       this.selectedProduct = product;

   }

   ...

 }