Estoy usando esta API de café gratuita para obtener datos.

Cada artículo de bebida de café se rellena en un componente de la tarjeta Vue. El componente Card tiene un counter: 0 que el usuario puede increment() y decrement() .

tarjeta.vue

 import {store} from '../store' import {ref} from 'vue' export default { data() { return { store, count: ref(0) } }, props: ['drink'], methods: { decrement(){ (this.count != 0) ? this.count-- : this.count = 0 store.decrement(this.drink.title,this.drink.id,this.count) }, increment(){ this.count++ store.increment(this.drink.title,this.drink.id,this.count) } }, }

Estoy usando la API de reactividad para la gestión del estado.

Store.js (gestión de estado)

 import { reactive, ref } from 'vue' export const store = reactive({ drinks : ref([]), increment(drinkName,id,count) { let drink = this.drinks.find(drink => drink.drinkID === id); if(drink) { drink.drinkCount = count } else { this.drinks.push({ drinkID : id, drinkName : drinkName, drinkCount : count, }) } }, decrement(drinkName,id,count) { let drink = this.drinks.find(drink => drink.drinkID === id); if(drink) { drink.drinkCount = count if(drink.drinkCount == 0) this.drinks.splice(this.drinks.indexOf(drink),1); } }, remove(id) { let drink = this.drinks.find(drink => drink.drinkID === id); if(drink) { drink.drinkCount = 0 if(drink.drinkCount == 0) this.drinks.splice(this.drinks.indexOf(drink),1); } } })

Finalmente, tengo un componente de barra lateral (carrito de compras) que usa la API de reactividad para agregar bebidas de café al carrito de manera reactiva en función del componente Cambios en la tarjeta.

Implementé un botón de eliminación para la barra lateral de modo que la función remove() restablecerá el conteo a cero y lo eliminará del carrito. Puedes ver el código en la sección Store.js. El problema que tengo es que todo se actualiza en el carrito de compras y el artículo se elimina como se esperaba, pero no sucede nada en el Card Component . El counter en el Componente Tarjeta no se actualiza.

nota: que el componente de la Card Component de la Sidebar Compnent no tienen una relación de padre e hijo.

Aquí hay un enlace para los códigos y caja