Vue.js 处理多张卡片中的按钮

发布于10月27日

我有产品列表页，在那里我使用多个ProductCard组件.我需要添加Spinner添加到购物车按钮时，点击它，但如果我只是添加Spinner到v-else，我有Spinners在每ProductCard.如何只控制这ProductCard个我点击添加到购物车按钮的地方？

父组件:

<ProductCard
  v-for="product in products"
  :key="product.id"
  :product="product"
/>

子组件:

<template>
  <div id="productCart">
    <div>
      <NuxtLink :to="`/product/${item.slug}`" />
      <NuxtLink v-if="item.name" :to="`/product/${item.slug}`">
        <h5
          id="productName"
          v-text="item.name"
        />
      </NuxtLink>
      <Button
        v-if="!loading"
        @click="addToBuyCart({ product: item })"
        v-text="$t('labels.buy')"
      />
      <Spinner v-else />
    </div>
  </div>
</template>

loading在Composable中定义，并在addToBuyCart函数中更新，方法是使其为真，然后添加到购物车(API)，然后将其设为假

推荐答案

正如IVO所指出的，在这种情况下，您应该判断循环中每个项的特定值，例如项ID，而不是布尔值，因为布尔值缺乏特殊性，因此不能用于此类场景.

<template>
  <div id="productCart">
    <div>
      <NuxtLink :to="`/product/${item.slug}`" />
      <NuxtLink v-if="item.name" :to="`/product/${item.slug}`">
        <h5
          id="productName"
          v-text="item.name"
        />
      </NuxtLink>
      <Button
        v-if="loading !== item.id"
        @click="addToBuyCart({ product: item })"
        v-text="$t('labels.buy')"
      />
      <Spinner v-else />
    </div>
  </div>
</template>

const addToBuyCart = ({product}) => {
  loading = product.id
  // some logic or request
  loading = null
}