我想创建一个web应用程序,显示API中的多个客户,当我单击某个客户时,将显示该客户的其他信息.
到目前为止,我已经获取了作为数组的API数据,为数组中的每个项目创建了一个列表和一个按钮.现在,当我按下一个客户按钮时,我想再次调用我的API,但使用id作为参数来访问有关该客户的特定信息.
然而,要做到这一点,我需要从我按下的按钮中保存"id"变量,我不知道如何实现它.
这就是我的应用程序看起来的样子(苗条)
<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比较陌生.