使用GraphQL数据层在Vue中切片数组

问题描述

我正在尝试在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吗？

解决方法

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

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