vue:如何从数组中过滤数据

Question

我是Vue的新手，我正在使用应用程序接口来显示数据，这里在我的代码中，当点击类别时，它保存类别的名称，并将用户重定向到另一个名为category.vue的页面，我的问题是重定向用户后，我现在想要显示的问题与该类别名称，只收到(作为过滤器)，有办法做到这一点吗？

​

  /* this is how i saved data to transfer to category page */
  
  <div class="category" v-for="(categoryy,index) in category(question1)" :key="index">
   <router-link :to="`/category/${category(question1)}`"> {{ categoryy }} </router-link>
    
       </div> 

​

category.vue

​

<template>
  
    <div class="vw">
   <p> related question of </p>
    
  <p>{{ this.$route.params.cat }}</p> /* category name i sent appears here */
       
     <ul class="container-question" v-for="(question1,index) in questions" :key="index"  

  >
/* THE PROBLEM : it shows all questions without filtering */
  
     {{question1.question}}
         </ul>
    </div>
 
</template>
<script>
export default {
    
    props:
{
    question1: Object
},
data(){
    return{
questions: []
    }
    


},
computed:{
    category(){
        let category = this.$route.params.cat;
        return category
    }
},
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>

​

Answer 1

您可以首先使用此路由https://opentdb.com/api_category.php获取所有类别，正如我怀疑您已经在第一个vue页面上所做的那样。

然后，将类别的id作为路由参数进行传递。

这里似乎唯一遗漏的一件事是，您在挂载的fetch中硬编码了类别id 9。

您可能希望将其更改为：

fetch(`https://opentdb.com/api.php?amount=10&category=${this.category}&difficulty=medium&type=multiple`,{
  method: 'get'
})

这种方式使用您在上一页的路由器参数中创建的计算属性。

Answer 2

你必须不在计算的属性中传递路由参数，而是直接在挂载的钩子上传递，

export default {
  mounted() {
    fetch(
      `https://opentdb.com/api.php?amount=10&category=${this.$route.params.cat}&difficulty=medium&type=multiple`,
      {
        method: "get",
      }
    )
      .then((response) => response.json())
      .then((jsonData) => (this.questions = jsonData.results));
  },
};