hide button under v-if when click

I am new in vuejs, I am building question-exam website. In this QuizComponent.vue, i want to list questions. However, I want to hide the 'Next' button each time I click 'Next'. I know I can put the 'Next' button outside the v-if loop so that I don't need to care about show and hide of 'Next' button. But for some reason (actually, I have two types of question in database table, one set questions will post answer's result, another list of question (i.e. hints) won't include the post method in 'Next' button. So I have to put 'Next' button inside the v-if loop.

This is QuizComponent.vue:

<template>
    <div class="card">
        <div class="card-header">Answer Section</div>
        <div class="card-body">
            <div v-for="(question, index) in questions">
                <div v-if="index<=questionIndex">
                    <div class="card-header" v-if="(question.qn_or_hint==2)">{{question.question}}
                    </div>
                    <div v-else>{{index}}.  {{question.question}}
                        <ol>
                            <li v-for="choice in question.answers">
                            <label for="">
                                <input type="radio"
                                :value="choice.is_correct==true?true:choice.answer"
                                :name="index"
                                v-model="correctAns[index]"
                                @click="choices(question.id,choice.id)"
                                >
                            {{choice.answer}}
                            </label>
                            </li>
                        </ol>
                    </div>
                    <div v-if="questionIndex!=questions.length && question.q_or_h==1">
                        <button class="btn btn-sm btn-success" @click="next(); postQuizChoice(); " :key="index">Next</button>
                    </div>
                    <div v-else-if="questionIndex!=questions.length && question.q_or_h==2">
                        <button class="btn btn-sm btn-success" @click="next()" :key="index">Next</button>
                    </div>
                </div>
            </div>
            <div v-show="questionIndex==questions.length">
                You Got: {{score()}}/{{questions.length}}
            </div>
        </div>
</div>
</template>

<script>
import axios from 'axios';

export default {
props:['times','taskId', 'taskQuestions', 'hasTaskPlayed'],
data(){
return{
    questions:this.taskQuestions,
    questionIndex:0,
    correctAns:Array(this.taskQuestions.length).fill(false),
    currentQuestion:0,
    currentAnswer:0,
    }
},
mounted() {
},
computed:{
},
methods:{
next(){
    this.questionIndex++
},
choices(question, answer){
    this.currentAnswer = answer,
    this.currentQuestion = question
},
score(){
    return this.correctAns.filter((val)=>{
        return val===true;
    }).length
},
postQuizChoice(){
    
}
}
}
</script>

Please help me to hide the old 'Next' button and display new 'Next' button inside v-if.

AungHtetPaing__

3 years ago

Level 22

@mosesngai can you format the code with three backticks so other people can read it better.

    ```
			code
    ```

mosesngai

3 years ago

Level 1

@AungHtetPaing__ Thanks, i added the backticks.

AungHtetPaing__

3 years ago

Level 22

@mosesngai I combined next button with upper v-if v-else and check current index to show next button with questionIndex!=questions.length && index == questionIndex. I hope I didn't misunderstand your question.

<template>
  <div class="card">
    <div class="card-header">Answer Section</div>
    <div class="card-body">
      <div v-for="(question, index) in questions">
        <div v-if="index<=questionIndex">
          <div v-if="question.qn_or_hint==2" class="card-header">
            {{question.question}}
            <button v-show="questionIndex!=questions.length && index == questionIndex" class="btn btn-sm btn-success" @click="next()" :key="index">Next</button>
          </div>
          <div v-else>
            {{index}}.  {{question.question}}
            <ol>
              <li v-for="choice in question.answers">
                <label for="">
                  <input type="radio"
                         :value="choice.is_correct==true?true:choice.answer"
                         :name="index"
                         v-model="correctAns[index]"
                         @click="choices(question.id,choice.id)"
                  >
                  {{choice.answer}}
                </label>
              </li>
            </ol>
            <button v-show="questionIndex!=questions.length && index == questionIndex" class="btn btn-sm btn-success" @click="next(); postQuizChoice();" :key="index">Next</button>
          </div>
        </div>
      </div>
      <div v-show="questionIndex==questions.length">
        You Got: {{score()}}/{{questions.length}}
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  props:['times','taskId', 'taskQuestions', 'hasTaskPlayed'],
  data(){
    return{
      questions:this.taskQuestions,
      questionIndex:0,
      correctAns:Array(this.taskQuestions.length).fill(false),
      currentQuestion:0,
      currentAnswer:0,
    }
  },
  mounted() {
  },
  computed:{
  },
  methods:{
    next(){
      this.questionIndex++
    },
    choices(question, answer){
      this.currentAnswer = answer,
          this.currentQuestion = question
    },
    score(){
      return this.correctAns.filter((val)=>{
        return val===true;
      }).length
    },
    postQuizChoice(){

    }
  }
}
</script>

Please or to participate in this conversation.