如何根据 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&nbsp; <div class="Area-3">&nbsp; &nbsp; <b-button size="sm" v-b-modal="'myModal'"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;@click="selectProduct(product)">More Details >> </b-button>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; <b-modal id="myModal">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<h1> {{ this.selectedProduct.Name }} </h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<h3> {{ this.selectedProduct.Description }} </h3>&nbsp; &nbsp; </b-modal>&nbsp; </div>Javascript：var app = new Vue({&nbsp;'el': '#myapp',&nbsp;data: {&nbsp; &nbsp; products: "",&nbsp; &nbsp; productID: 0,&nbsp; &nbsp; selectedProduct: {Name: '', Description: '', Amount:0}&nbsp;},&nbsp;methods: {&nbsp; &nbsp;allRecords: function(){&nbsp; &nbsp;...&nbsp; &nbsp;},&nbsp; &nbsp;selectProduct: function(product)&nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp;this.selectedProduct = product;&nbsp; &nbsp;}&nbsp; &nbsp;...&nbsp;}