С vue я обычно извлекал любую сложную логику в методы, например
<li v-for = "todo in todos" v-show = "!isTodoComplete(todo)">
{{ todo }}
</li>
Но когда я пробую тот же подход с svelte:
{#each todos as todo}
<li hidden = {isComplete(todo)}>{todo}</li>
{/each}
...
methods: { isComplete (todo) { ... } }
Получаю ошибку TypeError: ctx.isComplete is not a function
.
Я делаю что-то неправильно? Как сделать такие вещи стройным?
🤔 А знаете ли вы, что...
С Svelte можно создавать однофайловые компоненты с расширением .svelte.
Svelte различает помощники и методы.
Помощники - это функции, используемые внутри вашего шаблона для обработки данных - они должны быть чистыми функциями и не иметь доступа к состоянию компонента, за исключением того, что передается в качестве аргумента (например, объект todo
).
Методы - это функции, которые выполняют делать, часто в ответ на событие. У них есть доступ к состоянию компонентов.
В этом случае isComplete
должен быть помощником, а не методом.