Quiero establecer una clase active solo para el primer botón en este código:
<button class='optional-red-outlined-btn' v-for="(item, index) in faq" :key="item._id" @click="btnIndex = index" > {{ item.question }} </button> Significa que cuando se carga la página, si había 4 botones en ella, el primero de ellos debería tener una clase optional-red-outlined-btn y una clase active , pero otros solo tienen una clase optional-red-outlined-btn .
por supuesto, pero quiero que cuando haga clic en otro botón elimine el activo del primer botón, lo uso solo para un botón que tiene un botón de estilo activo: enfoque {color de fondo: $ opcional-rojo; color: #fff; } pero quiero que el primer botón predeterminado tenga este estilo
Puede hacer una clase dinámica basada en una condición como
:class="{ active: index === 0 }"Como se muestra en la documentación oficial.
Puedes hacerlo completamente sin vuejs. Usa CSS sencillo. Dale al botón una clase especial y luego:
button.special { color: blue } button.special:first { color: red }Estoy bastante seguro de que su variable btnIndex tiene un valor 0 de forma predeterminada. Entonces puedes aplicar la clase condicional
:class="btnIndex == index ?'active':''"