如何更改动态生成的项目列表的个别状态？

Question

我对 Svelte 和前端比较陌生，我正在构建一个产品目录的小型演示。该应用执行 api 请求并获取一些 json 数据并生成包含产品的网格并将一些数据填充到每个产品中。我想弄清楚如何更改每个项目的数量。每次单击加号按钮时，只有该按钮所属的产品的数量应该改变。例如，当第一个项目的加号按钮被点击时，只有它自己的数量被减少，而不是所有其他产品。如果只有该产品数量变为零，则该按钮将变为非活动状态。这是代码：

    import { onMount } from 'svelte';

    let products = [];
    let total = 0;
    let quantity = 5;

    onMount(async () => {
        const res = await fetch(`https://makeup-api.herokuapp.com/api/v1/products.json?brand=maybelline`);
        products = await res.json();
    });

    function increment(price){
        total= total + price;
        console.log(total);
        quantity = quantity - 1;
    } 

    function decrement(price){
        total= total - price;
        console.log(total);
        quantity = quantity + 1;
    } 
</script>

<h1>Photo album</h1>

<div class="photos">
    {#each products as product}
        <figure>
            <img src={product.image_link} alt={product.name}>
            <figcaption>{product.name}</figcaption>
            <small>{product.price}<small/>
                <h1>Quantity: {quantity}</h1>
                <button on:click={increment(parseFloat(product.price))}>+</button>
                <button on:click={decrement(parseFloat(product.price))}>-</button>
        </figure>
    {:else}
        <p>loading...</p>
    {/each}
    
</div>
<div>
    <h1>Total {total}</h1>
</div>

<style>
    .photos {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-gap: 8px;
    }

    figure, img {
        width: 100%;
        margin: 0;
    }
</style> ```

Answer 1

尝试以下方法

App.svelte
<script>
    import { onMount } from 'svelte';
    import Product from './Product.svelte'
    import { total } from './stores.js'

  let products = [];

  onMount(async () => {
    const res = await fetch(`https://makeup-api.herokuapp.com/api/v1/products.json?brand=maybelline`);
    products = await res.json();
        products.forEach(function (element) {
        element.quantity = 5;
        });
    });
        
</script>

<h1>Photo album</h1>
    {#if products && products.length}
        <div class="photos">
        {#each products as product}
                <Product product={product} />
            {/each}
    </div>    
  {:else}
    <p>loading...</p>
  {/if}
   
<div>
    <h1>Total {$total}</h1>
</div>

<style>
    .photos {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-gap: 8px;
    }

   
</style>

创建新产品组件

------Product.svelte----
<script>
    import { total } from './stores.js';
    export let product;

    function increment(price) {
        $total = $total + price;
        console.log($total);
        product.quantity = product.quantity - 1;
    }

    function decrement(price) {
        $total = $total - price;
        console.log($total);
        product.quantity = product.quantity + 1;
    }
</script>

<figure>
    <figcaption>{product.name}</figcaption>
    <img src={product.image_link} alt={product.name} />
    <small
        >{product.price}<small />
        <h1>Quantity: {product.quantity}</h1>
        <button on:click={increment(parseFloat(product.price))}>+</button>
        <button on:click={decrement(parseFloat(product.price))}>-</button>
    </small>
</figure>

<style>
    figure,
    img {
        width: 100%;
        margin: 0;
    }
</style>

然后添加商店

----stores.js----
import {writable} from 'svelte/store'

export const total = writable(0)

如何更改动态生成的项目列表的个别状态？

how to change individual state of dynamically generated list of items?

components

items

list

svelte

svelte-component