Following a click event trigger, I attempt to iterate through a specific array's length. Each element in the array is associated with an HTML element using a v-if statement. These elements should appear when the corresponding array item is set to true.
However, after clicking, the elements are not appearing, and upon further investigation, the array seems to be like this:
visibleQuestions: [ null, null, null, true ]In this scenario, there were 3 questions that were supposed to be displayed.
What steps can be taken to rectify this issue? The critical code snippet is as follows:
<template>
<fieldset v-for="(item, questionIndex) in questions" v-if="visibleQuestions[questionIndex]">
....
</fieldset>
<button @click="showAll(questions.length)">Show all</button>
</template>
<script>
export default {
asyncData(context) {
return context.app.$storyapi.get('cdn/stories', {
version: 'draft',
startsWith: '/subjects/biology/hl/1999-may'
}).then(response => {
console.log(response.data.stories[0].content.question);
return {
questions: response.data.stories[0].content.question
}
});
},
data() {
return {
visibleQuestions: []
}
},
methods: {
showAll: function(questionAmount) {
for (let i = 0; i < questionAmount; i++) {
this.$set(this.visibleQuestions, questionAmount, true);
}
}
}
}
</script>