I want to count the number of questions and display in index. On the other hand, the database have 2 types of questions, one need to count the index, one don't need to count

I want to count the number of questions and display in index. On the other hand, the database have 2 types of questions, one need to count the index, one don't need to count. If q_or_h ==1, i need to count++, if q_or_h == 2, no need to count. Please help me how to write such code inside vue!

<div v-if="index<=questionIndex">
                    <div class="card-header" v-if="(question.q_or_h==2)" >
                        <div>{{question.question}}</div>
                    </div>
                    
                    <div v-else >
                        <span :title="addCount(q_number)">{{q_number}} {{question.question}}</span>
                        <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>
            </div>
            
            <div v-if="questionIndex!=questions.length">
                        <button class="btn btn-sm btn-success" @click="next(); postQuizChoice(); ">Next</button>
                    </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,
    q_number:0,
}
},
mounted() {
},
computed:{
},
methods:{
next(){
    
},
choices(question, answer){
   
},
score(){
    
},
postQuizChoice(){
       
},
addCount(q_number){
    this.q_number++;
    }
}
}
</script>

I wrote the above code, howerver, not working, although without error. However, q_number shows the increment like this: 000, 101, 202, 303, 403, 404...

AungHtetPaing__

3 years ago

Level 22

@mosesngai I don't understand what do you want to do. Do you want to increase count when click next button? Or do you want to display all of questions?

If you want to display total questions count, display questions.length why need q_number.

If you want to increase count when click next, use @click.

If you want to display only q_or_h ==1 questions count, you need to filter question something like this

// just for example 
let filteredQuestion = this.questions.filter(question => question.q_or_h == 1)
console.log(filteredQuestion.length)

Lumethys

3 years ago

Level 5

your question is extremely confusing and your solution look convoluted. Please state exactly what each variable mean and what you want to do.

mosesngai

3 years ago

Level 1

I want to show the index of questions if they have property q_or_h = 1.

AungHtetPaing__

3 years ago

Level 22

@mosesngai showing index of questions is easy. I remember you are looping with v-for and there is index in your another thread. So check question is q_or_h == 1 or not and show index.

<span v-show="question.q_or_h == 1">{{index}}</span>

Please or to participate in this conversation.