여러 개를 사용하는 제품 목록 페이지가 있습니다.ProductCard요소.추가할 필요가 있다Spinner클릭 시 카트 버튼에 추가하지만 추가만 하면Spinner로.v-else나는Spinners어느 곳에서나ProductCard이것만 제어하는 방법ProductCard[ Add to Cart ]버튼을 클릭합니다.
상위 구성 요소:
<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> loadingcomposible에 정의되어 있으며, add To Buy Cart 함수로 갱신하고 있습니다.이 함수는 true로 한 후 카트(api)에 추가하고 false로 하는 것입니다.
질문에 대한 답변
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 }