Vue.js - How to pass data to Modal - html

Question

I used vue to populate the item list in my html, and what I want to do, is when the item is clicked, a modal would appear with the data of the clicked item. I'm not using 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>
Modal:
<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">×</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 = "access token here";
new Vue({
el: '#item-data',
data () {
return {
data:[]
}
},
mounted () {
..... API calll .....
},
methonds:{
sendInfo(items) {
this.selectedUser = items;
}
}
})
}
I want to pass the data {{items.item_name}} and {{store.default_price}} to the modal. How do I achieve this?

Answer 1

create a variable for the value you want to pass, a method to handle the event:
data () {
return {
data:[],
passedData:{item_name:null, default_price:null}
},
methods:{
sendInfo(item){
this.passedData = item
}
}
and on the HTML part where you loop through the items:
<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>
Modal:
<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">×</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>

Answer 2

Use common Vue instance for modal and HTML block to access the same data as. Suppose:
<div id='#item-data'>
<div>
//basic Html code
<div>
<div>
//modal code
<div>
<div>
then you can access same vue instance variable in your HTML and modal.

Answer 3

I'm going to assume that your modal markup is somewhere inside the element with the ID 'item-data', and so has access to the data in your Vue instance.
The first thing you need to do is declare selectedUser as a data property, as Vue needs to know about it upfront:
data () {
return {
data:[],
selectedUser: null,
}
},
Next, you need to change your modal markup slightly, so it's referring to the currently selected item (e.g the heading would be {{selectedUser.item_name}} instead of {{items}}).
Lastly, the syntax is wrong where you're attaching a click handler to your item row. Instead of click="sendInfo(items)" it should be #click="sendInfo(items)".