javascript - 如何根据vue.js中的category id和post category id的匹配来过滤类别？

Question

我正在使用 vue.js 和 node.js 开发一个博客网站。我分别创建了类别和产品集合[模型]，并在产品模式中引用了该类别。首先，我需要按类别名称过滤帖子。
这里我添加主页代码。当我点击类别和搜索词时，帖子没有停留在页面上，它正在重置功能。它正在调用reset post方法。如果我删除该方法，它只会卡在过滤后的帖子中，而不会显示其他过滤后的内容。如何解决这个过滤帖子、搜索帖子和重置帖子？

<template>
  <v-container>
    <v-app id="inspire">
      <v-app-bar app flat dark>
        <v-container class="py-0 fill-height">
          <h1>TechBlog</h1>
          <v-spacer></v-spacer>
          <v-btn v-for="(item, i) in items" :key="i" :to="item.link" text>
            {{ item.title }}
          </v-btn>

          <v-spacer></v-spacer>

          <Search :searchPosts="searchPosts" />
        </v-container>
      </v-app-bar>
      <v-main class="top">
        <router-view></router-view>
      </v-main>
    </v-app>
    <v-container id="container">
      <div class="half">
        <Filters :filterPosts="filterPosts" />
      </div>
      <div>
        <Posts :posts="posts" />
      </div>
    </v-container>
  </v-container>
</template>
<script>
import API from '../../api'
import NavBar from '@/components/Client/NavBar.vue'
import Filters from '@/components/Client/Filters.vue'
import Posts from '@/components/Client/Posts.vue'
import Search from '@/components/Client/Search.vue'
import axios from 'axios'
export default {
  name: 'Home',
  components: {
    NavBar,
    Filters,
    Posts,
    Search,
  },
  data() {
    return {
      posts: [],
      searchterm: '',
      links: ['Home', 'About'],
      items: [
        {title: 'Home', link: '/'},
        {title: 'About', link: '/aboutus'},
      ],
    }
  },
  async created() {
    this.posts = await API.getAllPost()
  },
  // computed: {
  //   filterednames: function() {
  //     return this.posts.filter((post) => {
  //       return post.title.toLowerCase().match(this.searchterm.toLowerCase())
  //     })
  //   },
  // },
  methods: {
    filterPosts(catName) {
      this.resetPosts()
      if (catName !== 'All') {
        this.posts = this.posts.filter((post) => {
          return post.category === catName
        })
      }
    },
    searchPosts(searchterm) {
      this.resetPosts()
      this.posts = this.posts.filter((post) => {
        return post.title.toLowerCase().includes(searchterm.toLowerCase())
      })
    },
    resetPosts() {
      axios.get(`/api/post`).then((response) => {
        this.posts = response.data
      })
    },
  },
}
</script>
<style>
main.v-main {
  margin-top: -650px;
}

.bloglist {
  margin-bottom: 20px;
}
.half {
  width: 10%;
}
#container {
  display: flex;
  margin: 20px;
}
</style>

标签： javascriptnode.jsvue.jsvuejs2vue-component