Below is my Vue Js code where I have successfully implemented a filter to API array elements. However, I am facing an issue when trying to set up a button that clears the filter upon clicking, restoring the page to its original state without any changes. Unfortunately, my current code below doesn't seem to work as it displays an empty array of questions. Any assistance would be greatly appreciated. Thank you in advance!
<template>
<div class="container" width=800px>
<b-row>
<b-col cols="8">
<h1> Recently Asked </h1>
<ul class="container-question" v-for="(question1,index) in questions" :key="index"
>
<li>
{{question1.question}}
</li></ul>
</b-col>
<b-button class="outline-primaryy" style="margin:auto;" @click="ClearFilter" :disabled="selectedIndex === index ">Clear Filter</b-button>
</div>
<router-view />
</div>
</template>
<script>
export default {
data(){
return{
questions: [],
answered: null,
index: 0,
selectedIndex: null,
}
},
methods: {
selectedAnswer(index) {
this.selectedIndex = index;
this.questions=this.questions.filter((question) => question.incorrect_answers.includes(index))
console.log(index)
},
ClearFilter(){
this.questions = []
},
watch: {
question1: {
handler() {
this.selectedIndex = null;
this.answered = false;
},
},
},
},
mounted: function(){
fetch('https://opentdb.com/api.php?amount=10&category=9&difficulty=medium&type=multiple',{
method: 'get'
})
.then((response) => {
return response.json()
})
.then((jsonData) => {
this.questions = jsonData.results
})
},
}
</script>