How to change the color/size/etc of dynamically created buttons in javascript?

user_13581131 0
Viewed 52

I have created dynamic buttons in vuejs where each button represents a different answer to a question.
My goal is: when I get the answer wrong, the correct option is highlighted in green until the next question is shown.
Is it also possible to change other settings of these "BaseButtons" with 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();
  },
vuejs3 vue.js css javascript
3 Answers

Have a look at this one:

HTML block:

<template>
  <div class="container-botoes">
    <BaseButton
      v-for="(options, index) in optionsAnswers"
      :key="options.id"
      class="optionsButtons"
      :class="correctAnsIndex === index ? 'green-button' : 'red-button'"
      @click="handleAnswer(options, index)"
    >
      {{ options.ans }}
    </BaseButton>
  </div>
</template>

JavaScript block:

<script>
export default {
  data() {
    return {
      correctAnsIndex: null,
    }
  },
  methods: {
    handleAnswer(options, index) {
      if (options.id === this.correctAnswer) {
        this.playerHit = true
        this.correctAnsIndex = index
      } else {
        this.opponentHit = true
        this.correctAnsIndex = null
      }
      this.nextquestion()
    },
  },
}
</script>

CSS block:

<style>
.red-button {
  background: red;
  color: white;
  font-weight: 700;
}

.green-button {
  background: green;
  color: white;
  font-weight: 700;
}
</style>

Code explanation:

We have passed the index of the loop in the handleAnswer method, where the value of the index will be assigned to the correctAnsIndex variable if options.id === this.correctAnswer and in the else part we will assign null value to the correctAnsIndex variable.

Now, we have applied conditional classes in HTML block, where if the index and correctAnsIndex matches then it would apply green-button class or else it will apple red-button class.

Eventually getting your expected result.

user_100577040

One option is to create css classes with styles you need and append them to BaseButton component depending on your conditions

user_170861350

Try this :

Vue.component('basebutton', {
  data() {
    return {
        isCorrect: false
    }
  },
  props: ['answerobj'],
  template: `<button :class="{ 'green': isCorrect, 'white': !isCorrect}" @click="handleAnswer(answerobj)">{{ answerobj.answer }}</button>`,
  methods: {
    handleAnswer(answerobj) {
      if (answerobj.correct) {
            this.isCorrect = true
      } else {
        this.isCorrect = false
      }
    }
  }
});

var app = new Vue({
  el: '#app',
  data: {
    list: [{
      question: 'Who is the tallest animal ?',
      optionsAnswers: [{
        answer: 'Elephant',
        correct: false
      }, {
        answer: 'Jirafe',
        correct: true
      }, {
        answer: 'Lion',
        correct: false
      }, {
        answer: 'Zebra',
        correct: false
      }]
    }]
  }
});
.green {
  background-color: green;
}

.white {
  background-color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="(item, index) in list" :key="index">
  <p><strong>Question : </strong>{{ item.question }}</p>
  <p><strong>Answers :</strong></p>
  <BaseButton v-for="(options, i) in item.optionsAnswers" :key="i" :answerobj="options">
  </BaseButton>
  </div>
</div>

user_41163000
Related