I created dynamic buttons in vuejs where each button represents a different answer to a question.
My goal is: when I answer incorrectly, the correct option is highlighted in green until the next question is shown.
Is it possible to change other settings of these "BaseButtons" using CSS? How can I do this?
<template> <div class="container-botoes"> <BaseButton class="optionsButtons" v-for="options in optionsAnswers" :key="options.id" @click="handleAnswer(options)"> {{options.ans}} </BaseButton> </div> </template>
methods:{ handleAnswer(options){ if (options.id === this.correctAnswer){ this.playerHit = true; } else { this.opponentHit = true; } this.nextquestion(); },
One option is to create css classes with the styles you need and then attach them to the BaseButton component based on your criteria