Vue - 将商品添加到购物车时禁用按钮。移除时启用

Question

我正在尝试向 ProductCard 中的 addToCart 按钮添加功能。一旦将纸杯蛋糕添加到我的购物车阵列中，我需要将其禁用。当通过 MiniCart 中的 removeItem/clearCart 删除时，我需要再次启用该按钮。我尝试了 if else 语句并尝试添加我已经 Google 但尚未成功的各种功能。非常感谢您的帮助^^

store.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export const store = new Vuex.Store({
    state: {
        cart: [],
        cupcake: [{
            title: 'Cream',
            price: 12.99,
            image: 'https://images.pexels.com/photos/1055270/pexels-photo-1055270.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260',
            id: 1,
            quantity: 1
        },
        {
            title: 'Choc',
            price: 10.99,
            image: 'https://images.pexels.com/photos/1055272/pexels-photo-1055272.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260',
            id: 2,
            quantity: 1
        },
        {
            title: 'Frosting',
            price: 14.99,
            image: 'https://images.pexels.com/photos/1055271/pexels-photo-1055271.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260',
            id: 3,
            quantity: 1
        },
        {
            title: 'Berry',
            price: 9.99,
            image: 'https://images.pexels.com/photos/3081657/pexels-photo-3081657.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260',
            id: 4,
            quantity: 1
        },
        {
            title: 'Deluxe',
            price: 19.99,
            image: 'https://images.pexels.com/photos/1998634/pexels-photo-1998634.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260',
            id: 5,
            quantity: 1
        },
        {
            title: 'Oreo',
            price: 19.99,
            image: 'https://images.pexels.com/photos/783274/pexels-photo-783274.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260',
            id: 6,
            quantity: 1
        },
        ]
    },
});

ProductCard.vue

<template>
  <ul
    class="
      px-32
      py-16
      grid
      row-auto
      gap-10
      grid-cols-1
      md:grid-cols-2
      xl:grid-cols-3
      2xl:grid-cols-4
    "
  >
    <li
      class="bg-white rounded-lg"
      v-for="cupcakes 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 class="px-10 text-xl font-bold"> {{ cupcakes.title }}</span>
        <span class="px-10 text-xl font-bold">${{ cupcakes.price }}</span>
        <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)"
        >
          Add to Cart
        </button>
      </div>
    </li>
  </ul>
</template>

<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">
    <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">
        <strong class="tracking-wider font-bold">{{ carts.title }}</strong>
        <p class="tracking-wider font-bold">
          {{ carts.quantity }} x ${{ carts.price }}
        </p>
        <button
          class="bg-gray-500 rounded p-2 tracking-wider font-bold text-white"
          v-on:click="removeItem(carts)"
        >
          remove
        </button>
        <button type="button" v-on:click="increase(carts)">Increase</button>
        <button type="button" v-on:click="deccrease(carts)">Deccrease</button>
      </div>
    </div>

    <div class="flex mx-5 my-8 justify-between">
      <span
        class="tracking-wider text-xl p-4 font-bold justify-center align-middle"
        >Total: ${{ total }}</span
      >
      <button
        v-on:click="clearCart"
        type="button"
        href=""
        class="
          bg-red-400
          p-4
          rounded
          tracking-wider
          text-white text-xl
          font-bold
        "
      >
        Clear Cart
      </button>
    </div>
  </div>
</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>

Answer 1

如果您将此禁用方法添加到您的按钮，如果纸杯蛋糕已经在购物车中，它将被禁用，您仍然可以添加其他纸杯蛋糕：

<button
      class="
        ...
      "
      type="button"
      v-on:click="addToCart(cupcakes)"
      :disabled="{ cart.includes(cupcakes) }"
    >
      Add to Cart
    </button>

您的 AddToCart 函数也可以重写为：

addToCart(cupcakes) {
  this.$store.state.cart.push(cupcakes);
},

Answer 2

就是这样。演示 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);
 },

Vue - 将商品添加到购物车时禁用按钮。移除时启用

Vue - Disable button when item is added to cart. Enable when it's removed

html

javascript

css

vue.js

vuex