Tengo algunos botones y cuando hago clic en cada uno de ellos, el color de fondo debería cambiar. En este momento, cambia el color de todos los botones cuando se hace clic en uno. Sin embargo, debe ser para cada botón individualmente. ¿Alguien sabe cómo hacer eso en?
Esa es mi principal clase esbelta:
<script lang="ts"> import Button from './Button.svelte'; let empty = false; function changeBtnState() { if (empty) { empty = false; } else { empty = true; } } </script> <Button label="process" {empty} onClickFn={changeBtnState} /> <Button label="date" {empty} onClickFn={changeBtnState} /> <style lang="scss"> .main-button.empty { background-color: red; } </style>Y ese es mi componente de botón
<script lang="ts"> export let label: string = 'test'; export let onClickFn: () => void = () => { return; }; export let empty = false; </script> <button type="submit" class="main-button" class:empty={empty} on:click={onClickFn}>{label}</button > <style lang="scss"> .main-button{ background-color: #f2eee2; } </style>El problema es que vinculas el atributo vacío de tu botón a la misma variable:
<Button label="process" {empty} onClickFn={changeBtnState} /> <Button label="date" {empty} onClickFn={changeBtnState} />Necesita uno separado para cada botón.
Lo que puede hacer es integrar changeBtnState dentro del componente Button. Entonces, la variable vacía se define EN el componente y es diferente para cada uno de ellos. Otra opción si no desea integrarlo en un componente es crear una matriz de variables "vacías" (1 por botón).