The syntax error in the Svelte conditional element class is causing issues

Question

The syntax error in the Svelte conditional element class is causing issues

Trying to create an if block following the Svelte Guide for if blocks. The process appears straightforward, yet Svelte is flagging it as a syntax error:

[!] (svelte plugin) ParseError: Unexpected character '#'
public\js\templates\works.html
3:     <div class="slides js_slides">
4:       {#each works as work, index}
5:         <div class="js_slide {#if index === currentIndex }selected{/if} {#if index === 0 }first{/if}">
                                ^
6:           <img src="/images/work/screenshots/{ works[index].slug }-0.{ works[index].imageExtension }"/>
7:         </div>

Why isn't {#if index === currentIndex } considered valid? How can I implement conditionals in Svelte?

I could potentially set up individual class= definitions for every potential outcome, but that would require extensive effort.

javascript css svelte

Answer 1

Answer №1

Blocks such as {#if..., {#each..., etc., cannot be inserted within attributes, as their function is solely to shape the structure of your markup.

As an alternative, it is customary to utilize ternary expressions...

<div class="
  js_slide
  {index === currentIndex ? 'selected' : ''}
  {index === 0 ? 'first' : ''}
">
  <img src="/images/work/screenshots/{ works[index].slug }-0.{ works[index].imageExtension }"/>
</div>

...or employ a helper:

<!-- language: lang-html -->

<div class="js_slide {getClass(work, index, currentIndex)}">
  <img src="/images/work/screenshots/{ works[index].slug }-0.{ works[index].imageExtension }"/>
</div>

Some individuals opt to use constructs like

data-selected={index === currentIndex}

and data-first={index === 0}, then style elements based on [data-selected=true] selectors instead.

Answer 2

Blocks such as {#if..., {#each..., etc., cannot be inserted within attributes, as their function is solely to shape the structure of your markup.

As an alternative, it is customary to utilize ternary expressions...

<div class="
  js_slide
  {index === currentIndex ? 'selected' : ''}
  {index === 0 ? 'first' : ''}
">
  <img src="/images/work/screenshots/{ works[index].slug }-0.{ works[index].imageExtension }"/>
</div>

...or employ a helper:

<!-- language: lang-html -->

<div class="js_slide {getClass(work, index, currentIndex)}">
  <img src="/images/work/screenshots/{ works[index].slug }-0.{ works[index].imageExtension }"/>
</div>

Some individuals opt to use constructs like

data-selected={index === currentIndex}

and data-first={index === 0}, then style elements based on [data-selected=true] selectors instead.

Answer 3

Answer №2

Starting from Svelte 2.13, it is also possible to use the following syntax:

<div class:selected={index === currentIndex}>...</div>

For more information, check out

Answer 4

Starting from Svelte 2.13, it is also possible to use the following syntax:

<div class:selected={index === currentIndex}>...</div>

For more information, check out

Answer 5

Answer №3

As mentioned in the Svelte documentation, an additional JavaScript variable is required to handle if-else statements within a class.

Here's an example where an each loop iterates from a to b, and when the if condition is true, the specified CSS will be applied:

{#each Array.from(Array(b+1).keys()).slice(a) as i }

    <div class="{ i===4 ? "border-l-2 border-blue-500" : ""}  p-3 space-y-4">
     some sample text
    </div>
{/each}

Example (1 to 15):

{#each Array.from(Array(15+1).keys()).slice(1) as i }

    <div class="{ i===3 ? "border-l-2 border-blue-500" : ""}  p-3 space-y-4">
     some sample text
    </div>
{/each}

Answer 6

As mentioned in the Svelte documentation, an additional JavaScript variable is required to handle if-else statements within a class.

Here's an example where an each loop iterates from a to b, and when the if condition is true, the specified CSS will be applied:

{#each Array.from(Array(b+1).keys()).slice(a) as i }

    <div class="{ i===4 ? "border-l-2 border-blue-500" : ""}  p-3 space-y-4">
     some sample text
    </div>
{/each}

Example (1 to 15):

{#each Array.from(Array(15+1).keys()).slice(1) as i }

    <div class="{ i===3 ? "border-l-2 border-blue-500" : ""}  p-3 space-y-4">
     some sample text
    </div>
{/each}

The syntax error in the Svelte conditional element class is causing issues

Answer №1

Answer №2

Answer №3

Similar questions

What is the process of incorporating a lowercase normalizer into an Elasticsearch mapping object?

What could be causing the issue with Hindi text not displaying properly on Safari?

Jstree's select_node function is failing to trigger

Error in identifying child element using class name

Unable to locate the "fcm-node" module in Node.js with TypeScript

Issue encountered with Tailwind Color Classes not functioning correctly when triggered by a button click within NextJS and React Vite framework

Modify animation trigger when mouse hovers over

React is a powerful tool that allows for the dynamic changing of state within

Leveraging Ajax with Google Analytics

Struggling with a Bootstrap v5.0.2 Modal glitch? Let's dive into a real-life case study to troub

"Optimize your website by incorporating lazy loading for images with IntersectionObserver for enhanced performance

Leveraging webpack2 for code splitting with the CommonsChunkPlugin

Rotating elements in CSS using the transform property with rotateX and rotateY values

Passing Data from $http.get to Angular Controller Using a Shared Variable

setting a callback function as a variable

Ways to deactivate remaining buttons until a function call finishes after selecting one in a react render() function?

Setting a pre-selected value in a Vue.js dropdown list involves a few simple steps. This

Unable to perform surveillance on the htpp.get method

Guide on customizing a dropdown button in a class-based Angular library with version 4 or higher

Discovering the following element containing an ID attribute with jQuery