使用 GraphQL 数据层在 Vue 中对数组进行切片答案

【问题标题】：Slice an array in Vue using GraphQL data layer使用 GraphQL 数据层在 Vue 中对数组进行切片
【发布时间】：2020-11-07 12:39:25
【问题描述】：

我正在尝试在 Vue 中对一组项目进行切片这是我的代码

<template>
    <div v-for="item in Items" :item="item" :key="item.id">{{ item.name }}</div>
</template>

<page-query>
  query {
    count
    items {
       id
       name
    }
  }
</page-query>

<script>
    export default {
        props: {
          items: Array,
        }
        computed: {
          Items() {
            return this.items.slice(0, 4);
          },
        }
    }
</script>

如您所见，我将数组切片为 4。在我的 API 数据中，我有一个“计数”对象，它返回一个我需要用来对项目进行切片的数字，但我不知道如何操作。您能否给我一个提示，如何使用计数数据而不是硬编码的数字 4？

【问题讨论】：

你在用gridsome吗？
是的，我正在使用 gridsome :)

标签： javascript arrays vue.js gridsome

【解决方案1】：

使用limit 应该会对您有所帮助

<page-query>
  query {
    count
    items(limit: 4) {
       id
       name
    }
  }
</page-query>

【讨论】：

感谢您的回答，但 limit 又是一个硬编码的数字。我正在尝试动态切片。在我的查询中，我有“计数”，它返回一个数字。我需要使用这个数字来切片或限制数组。