Svelte - 如何在模板中使用方法?

标签 svelte

对于 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

我做错了什么吗?如何以 slim 的方式做这样的事情?

最佳答案

Svelte 区分 helpersmethods .

Helpers 是在模板中用于处理数据的函数——它们应该是纯函数,除了作为参数传入的内容(例如 todo 对象)。

方法事情的函数,通常是响应事件。他们确实有权访问组件状态。

在这种情况下,isComplete 应该是一个助手,而不是一个方法。

关于Svelte - 如何在模板中使用方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51522539/

相关文章:

svelte - 更新数组中对象的正确方法是什么?

electron - 尝试让nedb导入Svelte组件

javascript - 如何模拟在 Svelte 中导入的 Javascript 文件进行单元测试?

error-handling - 如何在 sapper (svelte) 中捕获服务器错误

javascript - 如何从命令行将 Svelte 文件编译为 JavaScript?

c# - Sveltekit + NET 6 C# Api - 登录后,我无法调用具有授权的api

typescript - Svelte 强类型组件类

svelte - 为什么是 "Uncaught (in promise) TypeError: this.Root is not a constructor"?

conditional-statements - Svelte 的 v-show 替代品

svelte - 使用 Svelte 的表格分页