我正在使用這個免費的咖啡 API 來獲取資料。
每個咖啡飲料專案都填充在一個 Vue Card 組件中。Card 組件有一個counter: 0用戶可以increment()和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)
}
},
}
我正在使用Reactivity API進行狀態管理。
Store.js（狀態管理）
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);
}
}
})
最后，我有一個 Sidebar(shopping cart) 組件，它使用 Reactivity API 根據 Card 組件上的 Changes 反應性地將咖啡飲料添加到購物車中。
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
uj5u.com熱心網友回復：
每一種咖啡都必須擁有自己的count領域。但你有count每個Card Component。您還通過在鉤子中獲取資料來重新分配組件的HotView狀態IcedViewmounted()
我在這里作業
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/457853.html
標籤：javascript vue.js vue-component two-way-binding vue-reactivity