Vue 分页基于 ajax 的选择答案

【问题标题】：Vue paginated ajax based selectVue 分页基于 ajax 的选择
【发布时间】：2020-08-17 11:55:29
【问题描述】：

我有一个返回国家列表的休息端点。它采用以下查询参数：

searchQuery // optional search string
startFrom // the index in the list from where to return options
count // number of options to return

因此，searchQuery 作为''、startFrom 作为0 和count 作为10 的查询将返回列表中的前10 个国家/地区。

searchQuery 为Can、startFrom 为5 和count 为3 的查询将返回包含字符串Can 的国家/地区列表中的第五到第八个国家/地区。

我想将 pagination 示例从 vue-select 修改为使用上面的 rest api 来获取国家/地区，而不是像示例中那样使用国家/地区的静态列表。

Vue-select 文档也有基于 ajax 的示例。

但是，由于我是 Vue 新手，我很难以我想要的方式将两者结合起来。

请一些vue专家提供一些指针来实现我想要的。

这是我的分页示例，其中countries 作为静态数组的形式：

countries: ['Afghanistan', 'Albania', 'Algeria', ...]

模板：

<v-select :options="paginated" @search="query => search = query" :filterable="false">
    <li slot="list-footer" class="pagination">
      <button @click="offset -= 10" :disabled="!hasPrevPage">Prev</button>
      <button @click="offset += 10" :disabled="!hasNextPage">Next</button>
    </li>
</v-select>

数据：

data() {
    return {
        countries: // static array as mentioned above
        search: '',
        offset: 0,
        limit: 10,
    }
}

计算：

filtered() {
  return this.countries.filter(country => country.includes(this.search))
},
paginated() {
  return this.filtered.slice(this.offset, this.limit + this.offset)
},
hasNextPage() {
  const nextOffset = this.offset + 10
  return Boolean(this.filtered.slice(nextOffset, this.limit + nextOffset).length)
},
hasPrevPage() {
  const prevOffset = this.offset - 10
  return Boolean(this.filtered.slice(prevOffset, this.limit + prevOffset).length)
},

如何将其转换为从我的休息端点获取 countries？

【问题讨论】：

标签： javascript ajax vue.js vue-select

【解决方案1】：

这取决于您在 fetchOptions 函数中所做的工作。基本上，您需要将分页数据传递给该函数，并将此数据用作 AJAX 请求中的查询参数。提供更多代码，以便我可以为您指出解决问题的方向。

【讨论】：

我已经用我试图修改为 ajax 的分页示例更新了问题。