使用 Vuejs 进行搜索过滤器

Posted 2023-02-22

【中文标题】使用 Vuejs 进行搜索过滤器

【英文标题】：Search filter with Vuejs

【发布时间】：2019-07-14 02:35:43

【问题描述】：

我是 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;
      
    
  

我的搜索不起作用，我看不出有什么问题。有人可以给我关于我的代码的反馈，以便我可以继续这样做。

【问题讨论】：

您在控制台中看到了什么错误？

@hktang 我只看到“Uncaught SyntaxError: Unexpected token

如果您可以更新此链接中的代码，您可以查看更多详细信息codesandbox.io/s/2jo6j170op。我还没有设置vue-router。 @mijok

@hktang 我更新了整个代码codesandbox.io/s/4r91jm0q94 但我不知道为什么帖子没有加载，本地工作

@mijok 我认为这是一个混合内容错误。在您的请求中将 http 更改为 https："https://jsonplaceholder.typicode.com/posts"

【参考方案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>

【讨论】：

谢谢。我设法完成了这项工作，但问题是当搜索没有返回结果时，我的帖子不再呈现，这个 v-if 和 v-else 对我来说有点提前:-)。 codesandbox.io/s/jz7y92zoq9

@mijok 欢迎您！如果您觉得我的回答有帮助，请点赞。我们可以继续更新此代码并修复这些小问题。

非常感谢，你帮了我很多。

我设法用 v-if 显示“无结果”消息，但我的帖子没有呈现：codesandbox.io/s/jz7y92zoq9