CODEWITHSUNDEEP
javascripthtmlsvelte
Gh05d
Gh05d

Reputation: 8982

Svelte error on using function in class of html

I have a li tag with a title which does the following:

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

This works perfectly fine. But if I do the same in the class property:

          <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' : ''}`}

Then I get this error: [!] (plugin svelte) TypeError: Cannot set property 'maintain_context' of undefined

I don't really get why this happens. It seems to be a result of using the find method, as the error disappears when I remove the function. But it works in the title property, so it can't be the fault of the function.

Anybody an idea what is going on here?

Upvotes: 0

Views: 283

Answers (1)

voscausa
voscausa

Reputation: 11706

In Svelte you use a a class directive. More here. When the expression becomes true the selected class will be added. Or removed if false. 

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

Upvotes: 3

Related Questions