在 html 的 class 中使用函数时出现 Svelte 错误

Question

我有一个带有标题的 li 标签，它执行以下操作：

          <li
        title={`Click to ${values.videos.length > 0 && values.videos.find(videoID => videoID == video.id.videoId) ? 'un' : ''}select`}

这很好用。但是如果我在 class 属性:

中做同样的事情

          <li
        title={`Click to ${values.videos.length > 0 && values.videos.find(videoID => videoID == video.id.videoId) ? 'un' : ''}select`}
        class={`empty-button ${values.videos.length > 0 && values.videos.find(videoID => videoID == video.id.videoId) ? 'selected' : ''}`}

然后我得到这个错误： [!]（插件 svelte）TypeError：无法设置未定义的属性 'maintain_context'

我真的不明白为什么会这样。这似乎是使用 find 方法的结果，因为当我删除该函数时错误消失了。但它在标题属性中起作用，所以它不能是函数的错。

有人知道这是怎么回事吗？

Answer 1

在 Svelte 中，您使用 class 指令。更多here。当表达式变为真时，将添加选定的 class。如果为假，则删除。

<li class="empty-button" ... 
class:selected={values.videos.length > 0 && values.videos.find(videoID => videoID == video.id.videoI)} ...>

在 html 的 class 中使用函数时出现 Svelte 错误

Svelte error on using function in class of html

html

javascript

svelte