У меня проблема с созданием и обновлением списков компонентов в Svelte. У меня есть список TodoItems, а именно:
App.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.
🤔 А знаете ли вы, что...
Svelte использует концепцию компиляции в отличие от других фреймворков, таких как React и Vue.