1
votes

Bogue de script Svelte: l'événement de clic sur l'élément de commutation ne se déclenche pas

Je suis nouveau à Svelte et il y a des choses qui devraient être faciles à faire et pourtant elles me posent des problèmes. Dans une petite application Svelte, j'ai ce code HTML:

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

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

J'ai besoin d'afficher «On» ou «Off» dans l'élément span, en fonction de «l'état» du commutateur. Pour cela, j'ai:

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

Voir REPL ici .

Pour une raison que je ne peux pas comprendre, même s'il n'y a pas d'erreur dans la console, le span indique toujours "Off". Pourquoi?

javascript svelte

0 commentaires

3 Réponses :

2
votes

Vous rendez les choses trop compliquées. Vous pouvez facilement vous lier à la valeur vérifiée du composant sous-jacent:

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

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

Avant, vous avez essayé d'écouter un événement click , que votre Switch code> composant n'a pas, c'est pourquoi il n'a pas fonctionné. Mais comme il s'agit d'une case à cocher, la propriété est cochée. Trouvez plus d'informations ici .

4 commentaires

Je veux garder mon HTML aussi propre que possible. Par quoi dois-je remplacer l'événement de clic?

Vous pouvez le remplacer par le bind: checked = {status} . Vérifiez-le dans ce REPL: svelte.dev/repl/dae8a556dac44ac44ac1b48a9.249d 3.23.249d

Merci! Jetez également un œil à celui-ci .

Hé, le lien va vers cette page. Je vois aussi dans l'autre réponse, que je n'ai pas compris votre deuxième question sur le html bien rangé. Je l'aurais fait de la même manière que @RazvanZamfir

2
votes

Une autre version, sans logique dans le HTML (et tout cela dans la balise ):

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

0 commentaires

1
votes

Une autre version, utilisant le répartiteur d'événements du composant enfant pour émettre l'événement click vers le parent:

//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>

...

//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>

0 commentaires