如何基于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;
   }
   ...
 }

Answer 2

之所以只看到黑屏，是因为您没有在v-for唯一的ID赋予b-modal 。 因此，当您单击该按钮时，实际上是同时打开所有模态，并堆叠背景使它看起来很暗。

相反，您可以在模式ID中使用您的产品ID （我猜它是唯一的）

<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.ID}`" product_item = "'product'">
          More Details >> 
        </b-button>
        <b-modal :id="`myModal-${product.ID}`" >
          <h1> {{ product.Name }} </h1>
          <h3> {{ product.Description }} </h3>
        </b-modal>
      </div>
      <div class="Area-4">
        <br><button>Buy</button>
      </div>
    </div>
  </div>
</div>

笔示例： https : //codepen.io/Hiws/pen/qBWJjOZ?editors=1010

Answer 3

我无法复制该问题。 我创建了JSFiddle进行测试：

https://jsfiddle.net/4289wh0e/1/

但是，我意识到单击“更多详细信息”按钮时会显示多个模态元素。

我建议您在包装器中仅添加一个模式，并将所选产品存储在数据变量中。

https://jsfiddle.net/4289wh0e/2/

<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="'productModal'" @click="chooseProduct(product)" product_item="'product'">More Details >> </b-button>

            </div>

            <div class="Area-4">
                <br>
                <button>Buy</button>
            </div>
        </div>

        <b-modal id="productModal" v-if="chosenProduct">
            <h1> {{ chosenProduct.Name }} </h1>
            <h3> {{ chosenProduct.Description }} </h3>
        </b-modal>
    </div>
</div>

Vue.use(BootstrapVue)

var app = new Vue({
    'el': '#myapp',
    data: {
        products: [],
        chosenProduct: null
    },
    methods: {
            chooseProduct: function (product) {
            this.chosenProduct = product
        },
        allRecords: function(){
                    this.products = [
            {
                ID: 1,
                Description: 'dek',
              Name: 'Name',
              amount: 100
            },
            {
                ID: 2,
                Description: 'dek 2',
              Name: 'Name 2',
              amount: 300
            }
          ]
        },
    }
})