Vuejs - dynamically bind a class and execute function if a condition is meet

Question

I'm trying to find a solution to three little problems in my vue app. The first one is about class binding. I have a bootstrap card that will display a question and relative answers. After the user clicks on a radio input, the answer is saved and the others options are disabled.

I'm checking dynamically if the user answer is correct but I'm unable to change the class of the card border dynamically. I want to have a black border before the answer is given and then if is right change the border class to border-success or border-danger if it's wrong. I've tried with this code but without success, the border will have the border-danger class also if no answer is given.

<div class="card text-dark bg-light border-secondary shadow mt-3 mb-3" :class="[userAnswers[qindex] === correctAnswers[qindex] && answered[qindex] ? 'border-success' : 'border-danger']">

Another small problem with the UI of the app is with the card footer. I have added a card footer that is not visible until the question displayed is answered. It will display the correct answer, but I've noticed that if a correct answer is given it will do a graphic glitch and will appear and then disappear.

<div class="card-footer bg-transparent border-success fw-bold" v-show="userAnswers[qindex] !== correctAnswers[qindex]">La risposta correttà è: {{ correctAnswers[qindex] }}</div>

To try fixing I've tested v-if and the actual v-show, also I've added a transition on the element with css but seems not work

.card-footer {
  transition: ease-in .3s;
}

The last and most important problem is with a conditional check. I want to show a modal when the user have answered to all the available questions. I've tried to add an if() statement in the mounted hook of vue but it will never be fired. I've also tried to call the method inside the .then() callback of the axios call that will check each question answer but without success.

export default {
  name: 'App',
  data(){
    return {
      isLoading: true,
      showResult: false,
      elaspedTime: null,
      questions: [],
      answered: {},
      userAnswers: [],
      correctAnswers: []
    }
  },
  mounted(){
    this.init();
    // statement will be never evalued 
    if( this.answered.length === this.questions.length ){
      this.quizResults();
    }
  },
  methods: {
    init(){
      axios({
        method: 'GET',
        url: 'http://localhost:8990/init'
      }).then( (res) => {
        this.questions = [];
        this.questions = res.data;
        console.log(this.questions);
        this.isLoading = false;
      });
    },
    checkAnswer(qindex, index, value){
      // console.log(qindex, index, value);
      this.answered[qindex] = true;
      this.userAnswers.push(value);
      axios({
        method: 'POST',
        url: 'http://localhost:8990/answercheck',
        data: {
          questionIndex: index,
          choice: value
        }
      }).then( (res) => {
        console.log(res.data);
        this.correctAnswers.push(res.data.correctAnswer);
        
      });
    },
    quizResults(){
// some logics after all the questions are answered 
      console.log('Results');
    }
  }
}

Can anyone help me to find a solution to fix these problems? Thank you.

tony19 · Accepted Answer · 2022-07-16 01:54:27Z

1

So you have 3 questions here.

Regarding your first question:

your problem is the wrap with [] of the condition of the class. this should solve it:

<div class="card text-dark bg-light border-secondary shadow mt-3 mb-3" :class="!userAnswers[qindex] ? ‘’ : userAnswers[qindex] === correctAnswers[qindex] && answered[qindex] ? 'border-success' : 'border-danger'">

Regarding your second question:

maybe there is a chance that when you are waiting for response form server, userAnswers[qindex] has value with the correct answer, and correctAnswers[qindex] is still undefined (until you gets the response), and at this split second they are not equal to each other - and this is why you see the footer for a second and then it disapears. so the solution is to check:

correctAnswers[qundex] && userAnswers[qindex] !== correctAnswers[qindex]

Regarding your third question

I think the best solution is to put the condition in the .then of checkAnswer() like you tried. Your problem is that you check this.answered.length but this.answered is an Object not an Array and it does not have .length propery. So you need to check if:

Object.keys(this.answered).length === this.questions.length

So your method should be:

checkAnswer(qindex, index, value){
      // console.log(qindex, index, value);
      this.answered[qindex] = true;
      this.userAnswers.push(value);
      axios({
        method: 'POST',
        url: 'http://localhost:8990/answercheck',
        data: {
          questionIndex: index,
          choice: value
        }
      }).then((res) => {
        console.log(res.data);
        this.correctAnswers.push(res.data.correctAnswer);
        if(Object.keys(this.answered).length === this.questions.length){
              this.quizResults();
        }
      });
    },

by the way the reason your condition did not work when you called it inside mounted() is because mounted called only when the component is loaded - it does not listen to changes. you can read more about it in vue docs

edited Jul 16, 2022 at 1:54

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 25, 2021 at 18:54

Noy Gafni

1,2411 gold badge14 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

newbiedev Over a year ago

I will try your suggestions to fix the issues. The only thing I've missed is about the qindex value. It's the index generated from a v-for loop so I can't access to it inside computed to assign the binded class

newbiedev Over a year ago

tested the suggestions but seems not working. The border of the card will be red befor the question is answered and the footer will never appear. Also the v-if for the footer will prevent it to appear when needed :(

Noy Gafni Over a year ago

I edited the answer regarding the class of the border. And do you need the footer to appear always, or when you answer is not correct?

newbiedev Over a year ago

The footer needs to appear only if the answer isn't correct

Noy Gafni Over a year ago

So this condition should work. If you can add jsFidddle with this code I maybe able to play with it a little and find the problem

|

Collectives™ on Stack Overflow

Vuejs - dynamically bind a class and execute function if a condition is meet

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related