时间戳

首页 > 解决方案 > Vue js：如何清除应用的过滤器？

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

问题描述

我在Vue Js下面有这段代码，我已经对API数组元素实现了过滤器并且工作正常，现在我正在尝试设置一个按钮，当我点击它时清除过滤器并返回页面，因为除了我的代码没有任何变化下面没有工作它显示空数组问题，请帮助？并提前感谢 

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

标签： javascriptvue.js

解决方案

我不确定你的问题是否正确。但这可能会有所帮助：

.then((jsonData) => {
  this.questions = jsonData.results;
  this.unmutated = jsonData.results;
})

当您单击重置按钮时

this.questions = this.unmutated

推荐阅读