С 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 различает помощники и методы.
Помощники - это функции, используемые внутри вашего шаблона для обработки данных - они должны быть чистыми функциями и не иметь доступа к состоянию компонента, за исключением того, что передается в качестве аргумента (например, объект todo
).
Методы - это функции, которые выполняют делать, часто в ответ на событие. У них есть доступ к состоянию компонентов.
В этом случае isComplete
должен быть помощником, а не методом.