Tengo un botón + para agregar un artículo al carrito, funciona. Pero al mismo tiempo, cuando el número aumenta en el carrito, necesito el número que dice en stock disminuirá el número en stock que muestra que no funciona...
Necesito hacer lo mismo con el botón -
Realmente necesito que el número de inStock que se muestra cambie cuando agrego o elimino artículos del carrito. ¿Puede alguien ayudarme? soy nuevo en esto
Vue.component('product', { template: ` <div class="product"> <div class="product-image"> <img :src="image" /> </div> <div class="product-info"> <h1>{{ product }}</h1> <p v-if="inStock">In Stock {{inStock}}</p> <p v-else>Out of Stock</p> <button @click="addToCart" :disabled="!inStock" :class="{ disabledButton: !inStock }"> + </button> <button @click="removeFromCart"> - </button> </div> </div> `, data() { return { product: 'Hoodie', image: 'hoodie.jpeg', inStock: 10, cart: 0 } }, methods: { addToCart: function() { this.$emit('add-to-cart') }, removeFromCart: function() { this.$emit('remove-from-cart') } } }) var app = new Vue({ el: '#app', data: { cart: 0, inStock: 10 }, methods: { updateCart() { this.cart += 1, this.inStock -= 1, }, removeItem() { this.cart -= 1, this.inStock += 1 } } })HTML:
<div class="nav-bar"></div> <div id="app"> <div class="cart"> <p>Cart({{ cart }})</p> </div> <product @add-to-cart="updateCart" @remove-from-cart="removeItem"></product> </div>Dentro de su componente, elimine los atributos de datos en la inStock y cart y props .
Vue.component('product', { template: ` <div class="product"> <div class="product-image"> <img :src="image" /> </div> <div class="product-info"> <h1>{{ product }}</h1> <p v-if="inStock">In Stock {{inStock}}</p> <p v-else>Out of Stock</p> <button @click="addToCart" :disabled="!inStock" :class="{ disabledButton: !inStock }"> + </button> <button @click="removeFromCart"> - </button> </div> </div> `, data() { return { product: 'Hoodie', image: 'hoodie.jpeg', } }, props: { inStock: { type: Number, default: 0 }, cart : { type: Number, default: 0 } }, methods: { addToCart: function() { this.$emit('add-to-cart') }, removeFromCart: function() { this.$emit('remove-from-cart') } } }) var app = new Vue({ el: '#app', data: { cart: 0, inStock: 10 }, methods: { updateCart() { this.cart += 1, this.inStock -= 1, }, removeItem() { this.cart -= 1, this.inStock += 1 } } })Luego, en su componente principal, pase los accesorios.
Componente principal (HTML)
<div class="nav-bar"></div> <div id="app"> <div class="cart"> <p>Cart({{ cart }})</p> </div> <!-- changes for props added below --> <product :cart="cart" :inStock="inStock" @add-to-cart="updateCart" @remove-from-cart="removeItem"></product> </div>