0

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>

1 Answer 1

1

You can choose one of the strategies:

  1. fetch data on Cart.vue creation Cart.vue
export default {
  created() {
    service.userDisplayCart().then(response => {
      this.books = response.data;
    })
  },
...
}

P.S.: Do you really need a hardcoded book in books?

  1. fetch data in Dashboard.vue and pass it to the Card component Dashboard.vue:
<template>
...
  <div class="cart-icon" @click="onToggleCart"></div>
  <Card :books="books" v-if="showCart">
...
</template>
<script>
...
data() {
  return {
    showCart:false,
    books: []
  }
},
methods: {
  onToggleCart() {
    this.showCart=true
    service.userDisplayCart().then(response => {
      this.books = response.data;
    })
  }
}
...
</script>

Cart.vue

export default {
  props() {
    books: {
      type: Array,
      default: []
    }
  },
...

Up to you:)

1
  • actually i don't need any hardcoded values , inorder to remove hardcoded values i tried first with mounted() it's not working Jul 12, 2021 at 12:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.