Soy nuevo en vuejs y necesito un ejemplo de cómo cambiar el color entre dos botones al hacer clic en ese momento. Por ejemplo: cuando hago clic en el botón blanco, se vuelve negro y el otro se vuelve blanco, y viceversa.
En tu plantilla:
<div class="button-wrapper" :class="{'one-is-active': state.oneIsActive}"> <div class="button one" @click="toggleButton()" /> <div class="button two" @click="toggleButton()" /> </div>En su configuración (esto es solo una sugerencia, también podría usar una referencia o algo más; puede diferir según la versión):
const state = reactive({ oneIsActive: true, }); function toggleButton() { state.oneIsActive = !state.oneIsActive; }Su SCSS (puede diferir un poco en css puro o sass):
.button-wrapper { .one { background: white; } .two { background: black; } &:not(.one-is-active) { .one { background: black; } .two { background: white; } } }Si entiendo correctamente, desea tener una funcionalidad similar a un grupo de botones de radio, donde si hace clic en uno, desea que el color del otro se revierta.
Para hacer eso, los botones deben compartir estado.
Dónde/cómo se comparte este estado se puede implementar de muchas maneras diferentes, pero para este ejemplo sugiero que se almacene en el componente principal. El estado también se puede implementar mediante la API de composición o la API de opciones. Asumiré, según el nivel de experiencia, que las opciones pueden encajar mejor.
<script> export default { data() { return { selected: 0 } }, } </script> <template> <button :class="{red:selected == 1}" @click="selected = 1"> Button 1 </button> <button :class="{red:selected == 2}" @click="selected = 2"> Button 2 </button> </template> <style> .red{ background: red; } </style>