无法在论坛中按类别过滤

Question

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

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

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

希望有人能够帮助我，将在下面发布 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>

Answer 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 方法。