i have this code below in Vue Js and i've implemented filter to API array elements and works fine, now i'm trying to set a button that clears the filter when i click on it and returns the page as nothing changes but my code below didn't work it shows empty array questions, any help please? and thanks 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>
