The question is published on by Tutorial Guruji team.
I am new to Vue and am using the Bootstrap modals to display product information. I have grid containers that each have a product picture, description, and two buttons. One of the buttons(More details >>
), when clicked, would shoot a modal window that should show the very same product description and picture of the grid it was contained in.
<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); }); }, } })
Area 1, 2 and 4 work perfectly fine and they display the product data according to the v-for
value and as expected respectively for each grid container. Area 3 is a problem here when I click the More details >>
button, I just see a faded black screen. I am not sure what I am doing wrong here, would really appreciate some help.
Answer
Add a property selectedProduct, then on More Details button click event, assign the current product to the selectedProduct member as below :
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; } ... }