时间戳

首页 > 解决方案 > Vue.js - 如何将数据传递给 Modal

html - Vue.js - 如何将数据传递给 Modal

问题描述

我使用 vue 在我的 html 中填充项目列表，我想要做的是，当单击该项目时，会出现一个带有单击项目数据的模式。我没有使用 boostrap-vue。

html:

<div class="row">
            <div class="col-lg-4 col-md-6" v-for="items in data" data-toggle="modal" data-target="#exampleModal" user="'items'" click="sendInfo(items)">
                <a href="#" class="latest-product__item">
                    <div class="latest-product__item__pic">
                        <img src="img/latest-product/lp-1.jpg" alt="">
                    </div>
                    <div class="latest-product__item__text">
                        <h6>{{items.item_name}}</h6>
                        <div v-for="variant in items.variants">
                            <div v-for="store in variant.stores">
                                <span>{{store.default_price}}</span>
                            </div>
                         </div>
                    </div>
                </a>
            </div>
        </div>

模态：

 <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                    <a href="#" class="latest-product__item">
                        <div class="latest-product__item__pic">
                            <img src="img/latest-product/lp-1.jpg" alt="">
                        </div>
                        <div class="latest-product__item__text">
                            <h6>{{items}}</h6>
                            <span>{{items}}</span>
                        </div>
                    </a>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-success btn-block">Add to Cart</button>
                </div>
              </div>
            </div>
          </div>

视图：

window.onload = function () {
  const access_token = "access token here";

  new Vue({
    el: '#item-data',
    data () {
      return {
        data:[]
      }
    },
    mounted () {
      ..... API calll .....
    },
    methonds:{
      sendInfo(items) {
        this.selectedUser = items;
      }
    }
  })
}

我想将数据 {{items.item_name}} 和 {{store.default_price}} 传递给模式。我如何实现这一目标？

标签： htmlvue.js

解决方案

为您要传递的值创建一个变量，一个处理事件的方法：

data () {
  return {
    data:[],
    passedData:{item_name:null, default_price:null}
  },
methods:{
   sendInfo(item){
      this.passedData = item
   }
}

在循环项目的 HTML 部分：

<div class="col-lg-4 col-md-6" v-for="items in data" data-toggle="modal" data-target="#exampleModal" user="'items'" click="sendInfo(items)">
       <div class="latest-product__item__pic">
           <img src="img/latest-product/lp-1.jpg" alt="">
         </div>
         <div class="latest-product__item__text">
              <h6>{{items.item_name}}</h6>
              <div v-for="variant in items.variants">
                   <div v-for="store in variant.stores">
                        <span>{{store.default_price}}</span>
                   </div>
                   <a href="#" class="latest-product__item" @click="sendInfo({item_name:items.item_name,default_price:store.default_price})">
                   Show Modal 
                   </a>
               </div>
          </div>
 </div>

模态：

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
                <a href="#" class="latest-product__item">
                    <div class="latest-product__item__pic">
                        <img src="img/latest-product/lp-1.jpg" alt="">
                    </div>
                    <div class="latest-product__item__text">
                        <h6>{{passedData.item_name}}</h6>
                        <span>{{passedData.default_price}}</span>
                    </div>
                </a>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-success btn-block">Add to Cart</button>
            </div>
          </div>
        </div>
      </div>

推荐阅读