svelte-sapper выбор каждого элемента списка блоков для удаления - получить идентификатор

У меня есть список заказов, хранящихся в БД. Я использую каждый блок для отображения всех заказов с кнопкой удаления. Когда я нажимаю кнопку удаления, мне нужно получить идентификатор элемента списка CLICKED, чтобы я мог просмотреть этот порядок в базе данных и удалить его. Я не знаю, как получить идентификатор элемента списка CLICKED и передать его функции handledelete. Как мне это сделать в стройном / саперном?

Мой код для страницы, на которой отображаются все заказы:

<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>

sapper svelte-3
person Marco    schedule 28.08.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете сообщить функции delete, какой идентификатор был нажат, просто передав его в качестве аргумента функции:

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

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

!! Обратите внимание, что вам не следует вызывать handleDelete непосредственно в разметке, так как это выполнит функцию немедленно после рендеринга (и, таким образом, эффективно удалит вашу запись, как только как он появляется на экране)

person Stephane Vanraes    schedule 28.08.2020
comment
Спасибо. Очень полезно. - person Marco; 28.08.2020

arrow_upward
0
arrow_downward

Просто добавьте переменную в свою функцию удаления:

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

Затем добавьте идентификатор заказа также в свой on: click:

РЕДАКТИРОВАТЬ: on: вызов функции щелчка исправлен, как указано в другом ответе

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

Есть и другие способы сделать это, но это самый простой.
Вам не понадобится модификатор once, если вы удалите элемент.
Возможно, вам понадобится ключ с each-loop, чтобы сохранить список правильно обновленным после удаления (key = thing.id в следующем примере)

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

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

person grohjy    schedule 28.08.2020
comment
Ключевое предложение оказалось полезным. Спасибо. - person Marco; 28.08.2020