svelte-sapper 每个块列表项选择删除 - 获取 id

Question

我有一个存储在数据库中的订单列表。我使用每个块来显示所有带有删除按钮的订单。当我单击删除按钮时，我需要获取 CLICKED 列表项的 ID，以便我可以在数据库中查看该订单并将其删除。我不知道如何获取 CLICKED 列表项的 id 并将其传递给handledelete 函数。我如何在 svelte/sapper 中做到这一点？

显示所有订单页面的代码：

<script>
 
  let orderz =[]

  function handlesave() {
     //save all the order data to db...    
  } // handlesave


  function handleDelete () {
  

  fetch('order', {
  method: 'POST',
  credentials : 'include',
  headers: {
  'Accept': 'application/json',
  'Content-type' : 'application/json'
  },
  body: JSON.stringify({
  // order id to send it to server to delete it from the db
   
  })
  }).then(response => response.json())
  .then(responseJson => {
  console.log("xxxxxxx:", responseJson.orderdetails )      
  })
  .catch(error => console.log(error));

}

</script>


<form on:submit|preventDefault={handlesave}>
  <button type="submit">Place Order</button>
</form>

<ul>
  {#each orderz as order}
  <li >
    <p >{order.vendorid} - {order.vendorname} - {order.item} 
         - {order.price}</p>
    <button on:click|once={handleDelete}>Delete</button>
  </li>
  
  {/each}
</ul>

Answer 1

您可以告诉 delete 函数，只需将其作为参数传递给函数即可：

function handleDelete(id) {
  // Delete logic here
}

<button on:click="{() => handleDelete(id)}">Delete</button>

！！请注意，您应该不直接在标记中调用 handleDelete，因为这将在渲染时立即执行函数（从而有效地尽快删除您的条目正如它在屏幕上显示的那样）

Answer 2

只需将变量添加到您的删除功能：

function handleDelete (id){
... use id to delete item in database...
}

然后将订单 ID 也添加到您的 on:click:

编辑：on:click 函数调用已修复，如其他答案中所述

 <button on:click|once={()=>handleDelete(order.id)}>Delete</button>

还有其他方法可以做到这一点，但这是最简单的方法。
如果删除项目，则不需要 once 修饰符。
您可能需要一个带有each-loop 的键，以便在删除后保持列表正确更新（以下示例中的键 = thing.id）

{#each things as thing (thing.id)}
    <Thing current={thing.color}/>
{/each}

https://svelte.dev/tutorial/keyed-each-blocks