“过滤分页列表”不适用于vue-paginate节点

Question

在我的项目中，我已经通过vue-paginate节点添加了分页，并且我也通过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设置为您知道将随搜索值更改的内容 - 最简单的方法是将其设置为{{1}这很方便，也是一个原始的。

所以可以通过设置this.search来强制paginate组件重新渲染：

:key

然而，一个更好的解决方案可能涉及调试组件为什么不重新渲染 - 也许它是<paginate ... :list="fLangs" :key="search"> 的一个错误，也许你不会使用该组件，因为它＆＃39 ; s意图（虽然这似乎不太可能，因为文档本身使用相同的代码）。无论哪种方式，在vue-paginate组件上设置密钥至少应该让你克服这个障碍。