使用Vuejs搜索过滤器

Question

我是Vuejs新手。我正在建立简单的博客应用程序，我试图添加搜索过滤器，但我有一个问题。到目前为止，我的代码如下所示：

<template>
   <div>
      <input class="form-control" type="text" v-model="searchQuery" placeholder="Search" />
      <paginate
         name="blogs"
         :list="posts"
         :per="10"
         >
         <section v-for="blog in paginated('blogs')">
            <h2>{{ blog.title }}</h2>
            <router-link :to="'/post/' + blog.id" class="btn btn-primary">read more</router-link>
            <hr>
         </section>
      </paginate>
      <paginate-links
         for="blogs"
         :async="true"
         :show-step-links="true"
         :step-links="{
         next: 'Next',
         prev: 'Previous'
         }"
         :classes="{
         'ul': 'pagination',
         'ul > li': 'page-item',
         'ul > li > a': 'page-link',
         }"
         ></paginate-links>
   </div>
</template>

Javascript：

export default {
  data() {
    return {
      posts: [],
      paginate: ['blogs'],
      searchQuery: ''
    }
  },
  created() {
    this.$http.get("http://jsonplaceholder.typicode.com/posts")
      .then(response => response.json(), error => console.log(error))
      .then(json => this.posts = json, error => console.log(error));
  },
  computed: {
    filteredResources() {
      if (this.searchQuery) {
        return this.posts.filter((post) => {
          return post.title.startsWith(this.searchQuery);
        })
      } else {
        return this.posts;
      }
    }
  }
}

我的搜索不起作用，我看不出问题出在哪里。有人能给我一个关于我的代码的反馈吗?这样我就可以继续写下去了。

Answer 1

这个可以用：https://codesandbox.io/s/1y2loo164j

在paginate组件中，您应该使用

:list="filteredResources"

而不是

:list="posts"

如果filteredResources为空，您还应该使用v-if块来显示所有帖子，如下所示：

<paginate v-if="filteredResources" ...>
   Search result
</paginate>
<paginate v-else ...>
   All posts
</paginate>