“筛选分页列表”不适用于vue分页节点。

Question

在我的项目中，我通过vue分页节点添加了分页，我也通过vue分页添加了过滤，它工作得很好。当我在输入字段中输入一些列表中不存在的内容时，它是空白的，这也可以，但是当我开始删除字母时，列表上什么都不会显示，而当我删除所有字母时，列表就不会出现，只会出现分页。

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的一个bug，也许您没有按照它的意图使用组件(虽然这似乎不太可能，因为文档本身使用的代码几乎相同)。无论哪种方式，设置paginate组件的键至少可以让您暂时克服这个障碍。