Por ejemplo, el botón de abrir si lo presiono debería volverse rojo, pero todos los botones en otras filas también se vuelven rojos porque están en el mismo componente.
Guion
let user = { loggedIn: false }; function toggle(item) { user.loggedIn = !user.loggedIn; } {#if !user.loggedIn} <button id={item.id} class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-full" on:click={toggle(item)}> Open </button> {/if} {#if user.loggedIn} <button id={item.id} class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-full" on:click={toggle(item)}> Close </button> {/if}La identificación realmente no entra en juego con el estilo Svelte (a menos que lo desee). Creo que, en este momento, sus problemas son con la sintaxis del controlador de clics (como dijo HB) y probablemente con la forma en que está pasando datos a su componente Button. Tampoco estoy del todo seguro de qué está pasando con item , ya que no está realmente definido en ninguna parte (¿quizás esté en otro lugar de tu código?). Tomando su ejemplo, recorté parte de la grasa para que sea más fácil de leer en SO. Espero haber entendido lo que estás tratando de hacer correctamente. Avísame si no, y lo actualizaré. Enlace REPL
Button.svelte (Tenga en cuenta el controlador on:click y el permiso de exportación para la variable de usuario).
<script> export let user = { loggedIn: false}; function toggle() { user.loggedIn = !user.loggedIn; } </script> {#if !user.loggedIn} <button class="bg-green-500" on:click={()=>toggle()}> Open </button> {/if} {#if user.loggedIn} <button class="bg-red-500" on:click={()=>toggle()}> Close </button> {/if} <style> button {box-sizing: border-box; border-radius: 10px; padding: 5px 10px; place-items: center; width: 100px; color: white} .bg-green-500 {background: green;} .bg-green-500:hover {font-weight:700;} .bg-red-500 {background: red;} .bg-red-500:hover {font-weight: 700;} </style> App.svelte (o lo que sea que esté usando el botón)
<script> import Btn from './Button.svelte' let users = [{id: 1, loggedIn: false}, {id: 2, loggedIn: false}, {id: 3, loggedIn: true}]; </script> {#each users as user} <Btn {user} /> {/each}