Vue.js-如何将数据传递给模态

Question

我用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>

Vue：

window.onload = function () {
  const access_token = "b062a220a1744d8cb43563744b7eec58";

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

我想将数据{{items.item_name}}和{{store.default_price}}传递给模态。我该如何实现？

Answer 1

使用通用Vue实例作为模式和HTML块来访问相同的数据。假设：

<div id='#item-data'>
   <div>
   //basic Html code
   <div>

   <div>
   //modal code
   <div>
<div>

然后您可以在HTML和模式中访问相同的vue实例变量。