svelte - TypeError: each_blocks[i] 在 Svelte 中为空
问题描述
我在 Svelte 中创建和更新组件列表时遇到问题。我有一个 TodoItems 列表,即:
应用程序.html
<!-- ... -->
<!-- The culprit -->
{#if todos.length}
{#each todos as todo, i}
<TodoItem
on:remove='remove(i)'
title={todo.title}
/>
{/each}
{/if}
<script>
import TodoItem from './TodoItem.html';
export default {
components: {
TodoItem,
},
data() {
return {
todos: [{ title: 'Hello World' }],
};
},
methods: {
remove(key) {
let { todos } = this.get();
this.set({
todos: todos.filter((_, i) => i !== key),
});
},
},
};
</script>
TodoItem.html
<li>
<div class="view">
<label>{title}</label>
<button on:click='fire("remove")' class="destroy"></button>
</div>
</li>
更新列表时会出错Cannot read property 'i' of null
(chrome)或TypeError: each_blocks[i] is null
(firefox)。
这是一个REPL 示例。
解决方案
推荐阅读
- apache-spark - SPARK 数据源 V2 API 澄清过滤器下推
- c++ - 可变参数模板函数:没有匹配的调用函数,std::endl
- hive - Hive 无法将查询结果移动到文件夹
- spring-boot - 在进行 Spring Boot Junit 测试时,无法从 src/test/resources 加载文件
- c# - 如何获取公共数据并将其发布到对 Web api 发出的每个请求
- rxjs - 如何将可观察的父母和受抚养子女结合起来
- java - 如何使用apache poi为幻灯片设置不同的幻灯片过渡效果
- php - 解析错误:语法错误,第 25 行 C:\wamp64\www\PHP\New\input.php 中的文件意外结束
- python - Matplotlib 极坐标直方图已移动 bin
- node.js - Hostmonster SMTP 凭证不适用于托管在数字海洋水滴上的节点应用程序