0

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

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

因此，带有searchQueryas ''、startFromas0和countas的查询10将返回列表中的前 10 个国家/地区。

带有searchQueryas Can、startFromas5和countas的查询3将从包含该字符串的国家/地区列表中返回第 5 到第 8 个国家/地区Can。

我想从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从我的休息终点获取？

4

1 回答 1

0

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

于 2020-05-03T02:28:16.400 回答