javascript - 如何在 Svelte 中从数组中删除对象后重新渲染视图?
问题描述
我正在开发一个小型 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
在更新数组(从中删除一个元素)后,我无法再次呈现表(视图)。
我怎么做?
解决方案
推荐阅读
- vue.js - 提供 Inject 在 vue 3 组合 API 中无法正常工作
- linux - 如何使用 sSMTP 使用 ntlm 身份验证?
- elasticsearch - 如何从 Elasticssearch 中的字段中查询所有内容
- node.js - 尝试放入“node index.js”时出现错误“找不到模块”
- html - 如何创建从视口左侧到引导列内元素末尾的线
- node.js - 如何记录 WDIO 测试套件中的所有内容(包括钩子之前和之后)
- node.js - 即使代码看起来不错,为什么 Bcrypt 总是返回 false
- r - 如何在单个函数中重写此 R 代码
- android-notifications - android通知,如何制作没有图标的动作按钮
- c# - Url.Action 在当前上下文中不存在