使用按钮单击保存项目变量

Question

我想创建一个 Web 应用程序来显示 API 中的一些客户，当我点击一个客户时，将显示该客户的附加信息。

到目前为止，我已经将 API 数据作为数组获取，创建了一个列表，并为数组中的每个项目创建了一个按钮。现在，当我按下客户按钮时，我想再次调用我的 API，但使用 id 作为参数来访问有关该客户的特定信息。

但是，为此我需要保存我按下的按钮中的“id”变量，但我不明白如何实现它。

这是我的应用程序的样子（在 Svelte 中）

<script>
  import { onMount } from 'svelte'
    
  let customers = []

  onMount(() => {
    fetch('https://europe-west3-gcp-task-346814.cloudfunctions.net/customer-function-1/getCustomer')
      .then(response => response.json())
      .then(result => customers = result)
  })
    
  function handleClick() {
        
  }
    
</script>


{#each customers as customer (customer.id)}
<h2>
    <button on:click={() => handleClick()}>
    {customer.name}
  </button>
</h2>   

<p>
    id: {customer.id}
</p>
<hr>
{/each}

请注意，我对 JS 比较陌生，HTML。

Answer 1

您可以执行类似下面代码的操作。基本上，您需要将从迭代中获得的客户传递给 handleClick 函数。

<script>
  import { onMount } from 'svelte'
    
  let customers = []

  onMount(() => {
    fetch('https://europe-west3-gcp-task-346814.cloudfunctions.net/customer-function-1/getCustomer')
      .then(response => response.json())
      .then(result => customers = result)
  })
    
  function handleClick(customer) {
        // here you have access to the customer id by doing customer.id
        console.log(customer)
  }
    
</script>


{#each customers as customer (customer.id)}
<h2>
    <button on:click={() => handleClick(customer)}>
    {customer.name}
  </button>
</h2>   

<p>
    id: {customer.id}
</p>
<hr>
{/each}

代码更改：

<button on:click={() => handleClick(customer)}>

和

function handleClick(customer) {
     console.log(customer)
}

使用按钮单击保存项目变量

Save item variable with Button Click

html

javascript

onclick

svelte