I am developing one page which is responsible for displaying cart items and the response is coming from backend .when i click on close button in cart page only it should call the API and displays my Books in UI page, Now i need without clicking on close button it should automatically rendered in my page .How to do this thing please help me to fix this issue ,
Note:- 1)cart.vue component is a child of Dashboard.vue component. 2)in dashboard component i have one cart icon at the top bar, previously when i click on that icon it renders cart.vue component inside this component it will contain one default books card and it contains close button also ,when i click on close button it hits api then it displays in my UI page. 3)Now inorder to click close button inside cart component. it should automatically renders my items in my page.
please help me to fix this issue....
Cart.vue
<template>
<div class="main">
<div class="first-section">
<div class="content">
<h5>My Cart({{books.length-1}})</h5>
</div>
<div v-for="book in books" :key="book.id" class="container">
<div class="mid-section">
<img v-bind:src="book.file" alt="not found">
<p class="title-section">{{book.name}}</p>
</div>
<div class="author-section">
<p class="author-name">by {{book.author}}</p>
</div>
<div class="price-section">
<h6>Rs.{{book.price}}</h6>
</div>
<div class="icons">
<i class="fas fa-minus-circle"></i>
<input class="rectangle" value=1>
<i class="fas fa-plus-circle"></i>
</div>
<button class="close-btn" v-if="flag" @click="handlesubmit();Togglebtn();" type="submit">close</button>
</div>
<div class="btn-grps">
<button class="btn" v-on:click="flip()" v-if="hide==true" type="submit">Place Order</button>
</div>
</div>
<div class="second -section">
<div class="details-box">
<input type="text" v-if="hide==true" class="initial-btn" placeholder="Customer Details" />
</div>
<div v-if="hide==false" class="fill-details">
<form class="address">
<h4 class="heading">Customer Details</h4>
<div class="name">
<input type="name" required pattern="[A-Za-z]{3,10}">
<label class="label">Name</label>
</div>
<div class="name">
<input type="text" required>
<label class="label">Phone Number</label>
</div>
<div class="pin">
<input type="text" required>
<label class="label">PinCode</label>
</div>
<div class="pin">
<input type="text" required>
<label class="label">Locality</label>
</div>
<div class="address-block">
<input class="address" type="text" required>
<label class="label">Address</label>
</div>
<div class="city-landMark">
<input type="text" required>
<label class="label">City/Town</label>
</div>
<div class="city-landMark">
<input type="text" required>
<label class="label">LandMark</label>
</div>
<div class="Radio-Buttons">
<p>Type</p>
<div class="radio-btns flex-container">
<div>
<input type="radio" id="Home" value="Home" name="Type" v-model="role">
<div class="first-radio"> <label class="home" for="Home">Home</label></div>
</div>
<div>
<input type="radio" id="Work" value="Work" name="Type" v-model="role">
<div class="second-radio"> <label for="Work" class="work-label">Work</label></div>
</div>
<div>
<input type="radio" id="Other" value="Other" name="Type" v-model="role">
<div class="third-radio"><label for="Other">Other</label></div>
</div>
</div>
<div class="btn-continue">
<button type="submit" class="continue">continue</button>
</div>
</div>
</form>
</div>
</div>
</div>
</template>
<script>
import service from '../service/User'
export default {
data() {
return {
flag: true,
hide: true,
booksCount: 0,
books: [{
id: 0,
file: 'https://images-na.ssl-images-amazon.com/images/I/41MdP5Tn0wL._SX258_BO1,204,203,200_.jpg',
name: 'Dont Make me think',
author: 'Sai',
price: '1500'
}, ]
}
},
methods: {
flip() {
this.hide = !this.hide;
},
//this is my method it hits api when i click on close button
handlesubmit() {
service.userDisplayCart().then(response => {
this.books.push(...response.data);
return response;
})
},
Togglebtn() {
this.flag = !this.flag;
},
}
}
</script>
<style lang="scss" scoped>
@import "@/styles/Cart.scss";
</style>