Home  >  Q&A  >  body text

JavaScript: Modify the color/size, etc. of dynamically created buttons

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粉085689707P粉085689707244 days ago309

reply all(1)I'll reply

  • P粉007288593

    P粉0072885932024-02-18 13:11:05

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

    reply
    0
  • Cancelreply