Javascript 使用Vuejs搜索筛选器

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

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

我的搜索不起作用，我看不出有什么问题。谁能给我一个关于我的代码的反馈，这样我就可以继续这个了

这个有效：

在

paginate

组件中，应使用

:list="filteredResources"

而不是

:list="posts"

如果

filteredResources

为空，还应使用

v-if

块显示所有帖子，如下所示：

<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>

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

搜索结果
所有职位

您在控制台中看到了什么错误？@hktang我刚才看到了“未捕获的SyntaxError:意外标记如果您可以更新此链接中的代码，您可以看到更多详细信息。我还没有安装vue路由器@mijok@hktang我更新了整个代码，但我不知道为什么没有本地加载帖子works@mijok我认为这是一个混合内容错误。将请求中的

http

更改为

https

：https://jsonplaceholder.typicode.com/posts“谢谢。我设法做到了这一点，但问题是当搜索没有返回结果时，我的帖子不会再次呈现，这个v-if和v-else对我来说有点进步：-）@米约克，不客气！如果你觉得我的答案有帮助，请投赞成票。我们可以继续更新此代码并修复这些小问题。非常感谢，您帮助了我很多。我成功地对v-if进行了图像处理，以显示“无结果”消息，但我的帖子未呈现：