“过滤分页列表”在 vue-paginate 节点上不起作用

Question

在我的项目中，我添加了 vue-pagination 节点的分页，并且我也添加了 vue-pagination 的过滤，并且工作正常。当我在输入字段中输入列表中不存在的内容时，它是空白的，这也没关系，但是当我开始删除字母时，列表中不会显示任何内容，而当我删除所有字母时，列表不会出现，只出现出现分页。

HTML：

<input class="form-control form-control-search m-input" autocomplete="off" type="text" v-model="search" placeholder="Search...">

<paginate class="m-list-timeline__items no-timeline" name="items" :list="fLangs" :per="10">
  <div class="m-list-timeline__item no-timeline" v-for="item in paginated('items')" v-bind:key="item.id">
    <span class="m-list-timeline__text">
      <span class="timeline-title"><span class="clr-black-light">{{ item.name }}</span></span>
      <span class="timeline-subtitle"><span class="clr-grey">{{ item.description }}</span></span>
    </span>
    <span class="m-list-timeline__time">
      <button type="button" class="btn btn-default btn-sm m-btn m-btn--icon m-btn--icon-only m-btn--pill" @click="fetchAndUpdateItem(item.id)"><i class="la la-pencil"></i></button>
      <button type="button" class="btn btn-default btn-sm m-btn m-btn--icon m-btn--icon-only m-btn--pill" @click="fetchAndRemoveItem(item.id)"><i class="la la-trash"></i></button>
    </span>
  </div>
</paginate>
<paginate-links for="langs" :hide-single-page="true"></paginate-links>

数据：

data: function () {
    return {
      search: '',
      paginate: ['langs'],
      langs: ['Item One', 'Item Two', 'Item Three', 'Item Four', 'Item Five', 'Item Six', 'Item Seven', 'Item Eight', 'Item Nine', 'Item Ten', 'Item Eleven', 'Item Twelve', 'Item Thirteen']
  }
},

计算得出：

computed: {
  fLangs () {
      const re = new RegExp(this.search, 'i')
      return this.langs.filter(item => item.match(re))
  }
}

搜索前的图片：

搜索并删除字母后的图片：

不知道为什么当我删除字母或开始删除它时，我的列表现在显示出来。有人可以帮我吗？谢谢。

Answer 1

感谢我们的评论线程，我们知道该paginate组件无论出于何种原因都不会重新渲染。我不确定是什么会导致这种情况，但您可以做的是将 设为:key您知道会随搜索值而改变的值 - 最简单的方法是将其设置为this.search，这也是一个原语。

因此，您可以通过如下paginate设置来强制组件重新渲染：:key

<paginate ... :list="fLangs" :key="search">

然而，更好的解决方案可能涉及调试组件不重新渲染的原因 - 也许这是 的错误vue-paginate，也许您没有按预期使用组件（尽管这似乎不太可能，因为文档本身使用了大致相同的代码）。无论哪种方式，在组件上设置密钥paginate至少应该可以让您暂时克服这个障碍。