Struggling with my Vue 3 quiz app - everything works perfectly until I reach the last question. The button text should change to 'Finish' once the final question is loaded. Despite hours of searching and even using copilot, I still can't find the error. How can I update the button text after reaching the last question in Vue?
<script setup>
import { ref, computed } from 'vue'
const questions = ref([
{
question: 'How many books are in the kjva bible?',
answer: 0,
options: [
'80',
'32',
'60',
],
selected: null
},
{
question: "What is the name of Israel's first king?",
answer: 2,
options: [
'David',
'Asa',
'Saul',
],
selected: null
},
{
question: 'Salvation is of the...?',
answer: 1,
options: [
'Egyptians',
'Jews',
'Edomites',
],
selected: null
}
])
const quizCompleted = ref(false)
const currentQuestion = ref(0)
const score = computed(() => {
let value = 0
questions.value.map(q => {
if(q.selected == q.answer) {
value++
}
})
return value
})
const getCurrentQuestion = computed(() => {
let question = questions.value[currentQuestion.value]
questions.index = question.value
return question
})
const setAnswer = evt => {
questions.value[currentQuestion.value].selected = evt.target.value
evt.target.value = null
}
const nextQuestion = () => {
if(currentQuestion.value < questions.value.length -1) {
currentQuestion.value++
console.log('currentQuestion.value type:', typeof currentQuestion.va...
</template>
<style scoped>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
body {
background-color: #271C36;
color: #fff;
}
</style>
I've attempted to debug by console logging the nextQuestion function without success. I suspect that the issue lies in the button logic but I'm unsure.