我正在嘗試為位于ProductCard中的addToCart按鈕添加功能。我需要它在蛋糕被添加到我的購物車陣列后被禁用。當通過MiniCart中的removeItem/clearCart洗掉時，我需要這個按鈕再次被啟用。我已經嘗試了if else陳述句，并嘗試添加各種我在Google上找到的功能，但還沒有成功。我真的很感謝你的幫助^^
。store.js
import Vue from 'vue'/span>。
import Vuex from 'vuex';
Vue.use（Vuex）;
export const store = new Vuex.Store({)
state: {
cart: [],
cupcake: [{
title: 'Cream' ,
價格： 12.99。
圖片: 'https://images.pexels.com/photos/1055270/pexels-photo-1055270.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260'/span>,
id: 1,
數量: 1, 數量:
},
{
title: 'Choc'/span>,
價格： 10.99。
圖片: 'https://images.pexels.com/photos/1055272/pexels-photo-1055272.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260'/span>,
id: 2,
數量: 1.
},
{
title: 'Frosting',
價格： 14.99。
圖片: 'https://images.pexels.com/photos/1055271/pexels-photo-1055271.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260'/span>,
id: 3,
數量: 1.
},
{
title: 'Berry',
價格： 9.99。
圖片: 'https://images.pexels.com/photos/3081657/pexels-photo-3081657.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260'/span>,
id: 4,
數量: 1.
},
{
title: 'Deluxe'。
價格： 19.99。
圖片: 'https://images.pexels.com/photos/1998634/pexels-photo-1998634.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260'/span>,
id: 5,
數量: 1.
},
{
title: 'Oreo',
價格： 19.99,
圖片: 'https://images.pexels.com/photos/783274/pexels-photo-783274.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260'/span>,
id: 6,
數量: 1.
},
]
},
});
ProductCard.vue
<template>
<ul
class="
px-32
py-16
網格
行-自動
gap-10
grid-cols-1
md:grid-cols-2
xl:grid-cols-3
2xl:grid-cols-4
"
>
<li
class="bg-white rounded-lg"/span>
v-for="cupcake in cupcake"
:key="cupcakes.id"
>
<img
class="rounded-md w-screen object-cover max-h-60"
:src="cupcakes.image"。
/>
<div class="py-2 px-8 text-gray-600"/span>>
<span class="px-10 text-xl font-bold">/span> {{ cupcakes. title }}</span> {{ cupcakes.
<span class="px-10 text-xl font-bold"/span>>${{ cupcakes. price }}</span>${{ cupcakes.
<button
class="
bg-purple-200
font-bold
px-3
mt-2
text-xl
py-4
mb-4
w-full
Rounded-md
過渡-所有
hover:bg-purple-300
"/span>
type="button"/span>
v-on:click="addToCart（cupcakes）"
>
添加到購物車
</button>/span>
</div>/span>
</li>
</ul>/span>
</template>/span>
<script>
export default {
computed: {
cupcake（） {
return this.$store.state.cupcake;
},
},
methods: {
addToCart（cupcakes） {
this.$store.state.cart.push（{
title: cupcakes.title,
price: cupcakes.price,
image: cupcakes.image,
id: cupcakes.id,
quantity: cupcakes.quantity。
});
},
},
};
</script>>
Minicart.vue
<template>
<div class="bg-white border-2 border-gray-500 rounded-md absolute right-16"/span>>
<div
class="grid grid-cols-2 gap-20 m-5"
v-for="carts in cart"
:key="carts.id"。
>
<img class="w-24" :src="carts. image" alt=" />
<div class="grid grid-rows-3"/span>>
<strong class="tracking-wider font-bold">/span>{{ carts. title }}</strong>。
<p class="tracking-wider font-bold"/span>>
{{ carts.quantity }}x ${{ carts.price }}. x ${{ carts.price }}.
</p>
<button
class="bg-gray-500 rounded p-2 tracking-wider font-bold text-white"
v-on:click="removeItem(carts)"
>
洗掉
</button>移除
<button type="button" v-on。 click="increase(carts)">Increase</button>/span>
<button type="button" v-on。 click="deccrease(carts)">Deccrease</button>/span>
</div>/span>
</div>/span>
<div class="flex mx-5 my-8 justify-between" >
<span
class="tracking-wider text-xl p-4 font-bold justify-center align-middle"
>總計：${{總計}}</span
>
<button。
v-on:click="clearCart"/span>
type="button"
href=""/span>
class="
bg-red-400
p-4
圓形的
追蹤-寬
text-white text-xl
font-bold
"
>
清除購物車
</button>
</div>/span>
</div>/span>
</template>
<script>
export default {
computed: {
cart（） {
return this.$store.state.cart。
},
total: function () {
let total = 0;
for (let carts of this. $store.state.cart) {
total = carts.price * carts.quantity;
}
return total.toFixed(2) 。
},
},
methods: {
removeItem: function (carts) {
this.$store.state。 cart.splice（carts, 1）。
},
increase: function (carts) {
carts.quantity = 1;
},
deccrease: function (carts) {
if (carts.quantity > 1) {
carts.quantity -= 1;
} else {
this.$store.state。 cart.splice（carts, 1）。
}
},
clearCart: function () {
let length = this.$store。 state.cart.length。
this.$store.state。 cart.splice（0, length）。
console.log（length）。
},
},
};
</script>>
uj5u.com熱心網友回復：
如果你在你的按鈕上添加了這個disabled-method，它將被禁用，如果蛋糕已經在購物車中，你仍然可以添加其他的蛋糕：
<button
class="
...
"/span>
type="button"。
v-on:click="addToCart(cupcakes)"。
:disabled="{ cart.includes(cupcakes) }"
>
Add to Cart
</button>
你的AddToCart-功能也可以改寫為：
addToCart（cupcakes） {
this.$store.state.cart.push（cupcakes）。
},
uj5u.com熱心網友回復：
就像這樣。演示 https://codesandbox.io/s/jolly-shirley-dgg10
模板：
<button
class="bg-purple-200 font-bold px-3 mt-2 text-xl py-4 mb-4 w-full
rounded-md transition-all hover:bg-purple-300"。
type="button"。
v-on:click="addToCart(cupcakes)"。
:disabled="checkCart(cupcakes.id)"。
>
Add to Cart
</button>
方法：
checkCart（id） {
return this.$store.state.cart。 find((item) => item.id ==id) 。
},
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/333732.html
標籤：
上一篇：元標簽顯示在<body>中，而應該放在<head>中。
下一篇：組件之間的回應性