JavaScript: Modify the color/size, etc. of dynamically created buttons
P粉085689707
P粉085689707 2024-02-17 14:35:03
0
1
386

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();
  },

P粉085689707
P粉085689707

reply all(1)
P粉007288593

One option is to create css classes with the styles you need and then attach them to the BaseButton component based on your criteria

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template