无法在论坛中按类别过滤

Posted 2023-02-16

【中文标题】无法在论坛中按类别过滤

【英文标题】：Unable to Filter By Category in A Forum

【发布时间】：2022-01-06 00:47:05

【问题描述】：

我的论坛项目刚刚结束，但是我在按类别过滤时遇到了困难。

它需要做的是，当我点击侧边栏中的类别时，它会立即按所选类别过滤所有帖子/问题。

我不知道该怎么做，因为我尝试过的每种方法都没有奏效。

希望有人能够帮助我，将在下面发布 forum.vue 和 AppSidebar.vue 的代码 - 如果需要其他任何内容，请询问，我会编辑这篇文章

论坛.Vue

<template>
    <v-container fluid grid-list-md>
        <v-layout row wrap>
            <v-flex xs8>
                <question v-for="question in filterByCat(id)" :key="question.path" :question=question></question>
                <v-spacer></v-spacer>
                <div class="text-xs-center">
                    <v-pagination v-model="meta.current_page" :length="meta.last_page" @input="changePage"></v-pagination>
                </div>
            </v-flex>
            <v-flex xs4>
                <app-sidebar></app-sidebar>
            </v-flex>
        </v-layout>
    </v-container>
</template>

<script>
    import question from './question'
    import AppSidebar from './AppSidebar'
    export default 
        data() 
            return 
                questions: ,
                meta: ,
                id: ,
            
        ,
        components: 
            question,
            AppSidebar
        ,
        created() 
            this.fetchQuestions()
            this.listen()
        ,
        methods: 
            filterByCat(id)
                return this.questions.filter(question => question.category_id === id)
            ,
            fetchQuestions(page) 
                let url = page ? `/api/question?page=$page` : '/api/question'

                axios.get(url)
                    .then(res => 
                        this.questions = res.data.data
                        this.meta = res.data.meta
                    )
                    .catch(error => console.log(error.response.data))
            ,
            changePage(page) 
                this.fetchQuestions(page)
            ,
            listen()
             EventBus.$on('filterCategory', () => 
                 this.filterByCat(id)
        )
            ,
        
    
</script>

<style>

</style>

AppSidebar.vue

<template>
  <v-card>
      <v-toolbar color = "cyan" dark dense class="mt-4" elevation="2">
          <v-toolbar-title>Forum Categories</v-toolbar-title>
      </v-toolbar>

      <v-list>
          <v-list-item v-for="category in categories" :key="category.id">
              <v-card-actions>
                  <v-btn text color="blue" @click="filterCategory">category.name</v-btn>
              </v-card-actions>
          </v-list-item>
      </v-list>
  </v-card>
</template>

<script>
export default 
    data()
        return 
            categories:
        
    ,
    created()
        axios.get('/api/category')
        .then(res => this.categories = res.data.data.sort((a, b) => a.name.localeCompare(b.name)))
    ,
    methods: 
        filterCategory()
            EventBus.$emit('filterCategory')
        
    


</script>

<style>

</style>

【问题讨论】：

您的代码存在一些问题。不过，您似乎没有在事件总线中发出类别 ID。

@Rwd 你能详细说明一下吗？

【参考方案1】：

首先，您实际上并没有在AppSidebar.vue 组件中发出类别ID，因此Forum.vue 永远不会知道id 是什么，因此无法用它过滤任何内容。

更新 AppSidebar.vue 以便您实际发出 id：

<v-btn text color="blue" @click="filterCategory(category.id)">category.name</v-btn>

//...

filterCategory(id) 
    EventBus.$emit('filterCategory', id);

---

下一个问题是你的监听器只是调用过滤器方法（它只是返回过滤后的列表，它不会更新任何东西）id 也将是未定义的。

计算属性会更适合这个。

在您的Forum.vue 中创建一个名为filteredQuestions 的计算属性：

computed: 
    filteredQuestions() 
        if (this.id) 
            return this.questions.filter(question => question.category_id === this.id)
        

        return this.questions;
    
,

更新您的事件侦听器以简单地设置id：

listen() 
    EventBus.$on('filterCategory', (id) =>  
        this.id = id;
    )
,    

然后将您的v-for 更新为：

<question v-for="question in filteredQuestions"

最后，您可以删除 filterByCat 方法。