I'm using this free coffee API to fetch data.
Each coffee drink item is populated in a Vue Card component. The Card component has a counter: 0
that the user can increment()
and decrement()
.
Card.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)
}
},
}
I'm using the Reactivity API for state management.
Store.js(state management)
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);
}
}
})
Finally, I have a Sidebar(shopping cart) component that uses the Reactivity API to reactively add coffee drinks to the cart based on the Changes on the Card component.
I implemented a remove button for the sidebar such that the remove()
function will reset the count to zero and remove it from the cart. You can see the code in the Store.js section. The issue I am having is that everything is updated in the shopping cart and the item is removed as expected but nothing happens in the Card Component
. The counter
in the Card Component does not update.
note: that the Card Component
and Sidebar Compnent
do not have a parent and child relationship.
Here is a link for the codesandbox
each coffee has to possess its own count
field. but you have count
for each Card Component
. also you're re-assigning HotView
and IcedView
components' state with fetching data in mounted()
hook
I get it work here