Tengo un componente principal en el que realizo la llamada a la API y obtengo la respuesta. Entonces, lo que estoy tratando de hacer es pasar esta respuesta como un apoyo al componente secundario en Vue. Así que aquí está mi componente principal y la llamada:
<button class="btn button col-2" @click="addToCart()"> Add to cart </button> addToCart: function () { let amount = this.itemsCount !== "" ? this.itemsCount : 1; if(this.variationId != null) { this.warningMessage = false; cartHelper.addToCart(this.product.id, this.variationId, amount, (response) => { this.cartItems = response.data.attributes.items; }); } else { this.warningMessage = true; } },Así que quiero pasar este "this.cartItems" al componente secundario que es:
<template> <div class="dropdown-menu cart" aria-labelledby="triggerId" > <div class="inner-cart"> <div v-for="item in cart" :key="item.product.id"> <div class="cart-items"> <div> <strong>{{ item.product.name }}</strong> <br/> {{ item.quantity }} x $45 </div> <div> <a class="remove" @click.prevent="removeProductFromCart(item.product)">Remove</a> </div> </div> </div> <hr/> <div class="cart-items-total"> <span>Total: {{cartTotalPrice}}</span> <a href="#" @click.prevent="clearCartItems()">Clear Cart</a> </div> <hr/> <router-link :to="{name: 'order'}" class="btn button-secondary">Go To Cart</router-link> </div> </div> </template> <script> export default { computed: { }, methods: { } }; </script>Así que soy bastante nuevo en vue, si me pueden ayudar con esto, estaría muy contento.
Vue.component('Child', { template: ` <div class=""> <p>{{ childitems }}</p> </div> `, props: ['childitems'] }) new Vue({ el: '#demo', data() { return { items: [] } }, methods: { getItems() { //your API call setTimeout(() => { this.items = [1, 2] }, 2000); } } }) Vue.config.productionTip = false Vue.config.devtools = false <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <button @click="getItems">get data</button> <Child v-if="items.length" :childitems="items" /> </div> Puede esperar la respuesta y, cuando this.cartItems , renderice su componente secundario con una condición v-if="this.cartItems.length"
Pasar accesorios es bastante simple. Si cartItems es lo que quiere pasar como accesorio, puede hacer esto:
<my-child-component :cartItems="cartItems"></my-child-component> En este caso, implementó a su hijo como myChildComponent . Le pasa cartItems con :cartItems="cartItems" . En su hijo usted hace esto:
props: { cartItems: Object } Ahora puede usarlo con this.cartItems en sus métodos o {{cartItems}} en su plantilla.