在 Svelte 中从数组中删除对象后，如何重新渲染视图?

Question

我正在开发一个小型的Svelte应用程序，用于学习目的(我是Svelte的新手(。应用程序使用视图中显示的对象数组作为 HTML 表：

let countries = [
{ code: "AF", name: "Afghanistan" },
{ code: "AL", name: "Albania" },
{ code: "IL", name: "Israel" }
]; 
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Code</th>
<th>Name</th>
<th class="text-right">Actions</th>
</tr>
</thead>
<tbody>
{#if countries.length}
{#each countries as c, index}  
<tr>
<td>{index+1}</td>
<td>{c.code}</td>
<td>{c.name}</td>
<td class="text-right">
<button data-code="{c.code}" on:click="{deleteCountry}" class="btn btn-sm btn-danger">Delete</button>
</td>
</tr>
{/each}
{:else}
<tr>
<td colspan="4">There are no countries</td>
</tr>
{/if}
</tbody>
</table>

我正在以这种方式执行删除操作：

function deleteCountry(){
let ccode = this.getAttribute('data-code');
let itemIdx = countries.findIndex(x => x.code == ccode);
countries.splice(itemIdx,1);
console.log(countries);
}

这里有一个 REPL。

问题所在

更新countries数组后，我无法再次呈现表(视图((从中删除元素(。

我该怎么做？

Answer 1

add

countries = countries;

在此行之后

countries.splice(itemIdx,1);

因为反应性/重新渲染/UI 更新仅在分配后标记。

Answer 2

为了让 svelte 获取对国家/地区数组的更改，您需要创建数组的新引用。为此，您可以使用Array.filter方法。

<script>
let countries = [
{ code: "AF", name: "Afghanistan" },
{ code: "AL", name: "Albania" },
{ code: "IL", name: "Israel" }
];

function deleteCountry(code) {
countries = countries.filter(c => c.code !== code)
}
</script>
<table class="table table-bordered"> 
<thead>
<tr>
<th>#</th>
<th>Code</th>
<th>Name</th>
<th class="text-right">Actions</th>
</tr>
</thead>
<tbody>
{#if countries.length}
{#each countries as c, index}   
<tr>
<td>{index+1}</td>
<td>{c.code}</td>
<td>{c.name}</td>
<td class="text-right">
<button on:click="{() => deleteCountry(c.code)}" class="btn btn-sm btn-danger">Delete</button>
</td>
</tr>
{/each}
{:else}
<tr>
<td colspan="4">There are no countries</td>
</tr>
{/if}
</tbody>
</table>

您也可以直接使用国家/地区代码作为deleteCountry方法的参数。