Svelte script bug: Switch element click event does not fire

Question

I am new to Svelte and there are things I suppose should be easy to do and yet they give me trouble. In a small Svelte app I have this HTML:

<div class="mt-5 mb-6">
   <Switch on:click={toggle} /> <span>{stat}</span>
</div>

I need to display "On" or "Off" in the span element, depending on the "state" of the switch. For this purpose, I have:

import Switch from './Switch.svelte';
let stat = 'off';
let status = false;

function toggle () {
 status = !status;
     stat = status ? "on" : "off";
}

See REPL here.

For a reason I can not understand, even though there's no error in the console, the span always shows "Off". Why?

Razvan Zamfir · Accepted Answer · 2020-06-24 08:46:16Z

2

You are making it too complicated. You can easily bind to the checked value of the underlying component:

<script>
    import Switch from './Switch.svelte';
    let status;
    
</script>

<div>
    <Switch bind:checked={status} /> <span>{status ? "on" : "off"}</span>
</div>

Before, you tried to listen to an click event, which your Switch component does not have, that is why it did not work. But as it is a checkbox, it has the checked property. Find more info here.

edited Jun 24, 2020 at 8:46

Razvan Zamfir

4,8107 gold badges51 silver badges292 bronze badges

answered Jun 24, 2020 at 8:10

Gh05d

9,06211 gold badges42 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Razvan Zamfir Over a year ago

I want to keep my HTML as clean as possible. What shall I replace the click event with?

Gh05d Over a year ago

You can replace it with the bind:checked={status}. Check it in this REPL: svelte.dev/repl/dae8a556dac44ac1b48a949dd2ae61f2?version=3.23.2

Razvan Zamfir Over a year ago

Thanks! Have a look at this one too.

Gh05d Over a year ago

Hey, the link goes to this page. I also see from the other answer, that I did not understand your second question about the tidy html. I would have done it the same way as @RazvanZamfir

Razvan Zamfir · Accepted Answer · 2020-06-24 08:48:07Z

2

Another version, with no logic in the HTML (and all of it inside the <script> tag):

<script>
    import Switch from '../ui/Switch.svelte';
    let stat = 'off';
    let status = false;
    $:stat = status ? "On" : "Off"; 
</script>

<div>
    <Switch bind:checked={status} /> <span>{stat}</span>
</div>

answered Jun 24, 2020 at 8:48

Razvan Zamfir

4,8107 gold badges51 silver badges292 bronze badges

Comments

Andrew1325 · Accepted Answer · 2020-06-24 09:17:42Z

1

Another version, using the event dispatcher from the child component to emit the click event to the parent:

//Switch.svelte
<script>
    import { createEventDispatcher } from 'svelte';

    const dispatch = createEventDispatcher();
</script>

<label class="switch">
  <input type="checkbox" on:click="{() => dispatch('toggle')}"/>
  <span class="slider" />
</label>

...

//App.svelte
<script>
    import Switch from './Switch.svelte';
    let stat = 'off';
    let status = false;
    
    function toggle () {
     status = !status;
         stat = status ? "on" : "off";
  }
</script>

<div class="mt-5 mb-6">
    <Switch on:toggle={toggle} /> <span>{stat}</span>
</div>

answered Jun 24, 2020 at 9:17

Andrew1325

3,5791 gold badge18 silver badges25 bronze badges

Collectives™ on Stack Overflow

Svelte script bug: Switch element click event does not fire

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related