javascript - Vue：应用过滤器后如何清除过滤器？

Question

在下面的 Vue js 代码中，我创建了一个过滤器，因此当我单击类别时，它会过滤以仅显示相关的类别，并且效果很好，但是我想添加在使用 ClearFiler() 函数单击后清除过滤器的按钮（重置以显示每个没有过滤器的问题）但它不起作用，有没有办法做到这一点？

并提前感谢

<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}}

 

  <b-row>
   <div class="category" v-for="(categoryy,index) in category(question1)" v-bind:key="index" @click="selectedAnswer(categoryy)">
 
   {{ categoryy }}
   
    
       </div> 

    
  </b-row>
<b-row>


     
  </b-row>
     </li></ul>

  </b-col>
  <b-col>

   
        <div>
  
</div>
  </b-col>

  </b-row>
<router-view />

 </div>

   
</template>
<script>
export default {

  
    data(){
    return{
      questions: [],
       answered: null,
      index: 0,
     selectedIndex: null,
     
     
    }
  },

 watch: {
    question1: {

      handler() {
        this.selectedIndex = null;
       
      },
    },
  },
methods: {

      selectedAnswer(index) {
      this.selectedIndex = index;
      this.questions=this.questions.filter((question) => question.incorrect_answers.includes(index))
      console.log(index)
   
       

    },
    ClearFilter()
    {
      this.question=this.questions //not working
    }

},


  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>

标签： javascriptvue.js

Answer 1

您需要相应地进行样式更改。

new Vue({
      el: '#app',
     data() {
    return {
      questions: null,
      selCategory: "all"
    };
  },
  computed: {
    filterQuestions() {
      return this.selCategory === "all"
        ? this.questions
        : this.questions.filter((item) => item.category === this.selCategory);
    },
    categories() {
      const allCat = this.questions.map((item) => item.category);
      return allCat.filter((item, pos) => {
        return allCat.indexOf(item) == pos;
      });
    }
  },
  mounted() {
    fetch(
      "https://opentdb.com/api.php?amount=10&difficulty=medium&type=multiple"
    )
      .then((res) => res.json())
      .then((resp) => {
        this.questions = resp.results;
      });
  },
      
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
 <div id="app">
    <div v-if="questions">
    <h1>Recently Asked</h1>
    Filter by Category:
    <select v-model="selCategory">
      <option value="all">All</option>
      <option v-for="cat in categories" :value="cat">{{ cat }}</option>
    </select>
    <hr />
    <table>
      <th><td>Category</td></th>
     <th><td>Question</td></th>
      <tr v-for="(question, index) in filterQuestions" :key="index">
        <td>{{ question.category }}</td>
        <td>
          <p>{{ question.question }}</p>
        </td>
      </tr>
    </table>
    </div>
    <div v-else>
    Loading...
    </div>
  </div>