How to remove .slice() from v-for when calling child component on different parent components?

Question

JavaScript

There is a child component <service-content />
in it I write

<div v-for="item in services.slice(0, 11)">
    {{ item.name }}
  </div>

Accordingly, v-for displays 12 items for me on the pages of the parent components index and services where I call this child component <service-content />,
but in the parent component indexI need .slice(0, 11) and in the parent component servicesI need the output of all items without .slice( 0, 11), what is the best way to implement this?

Answer 1

Do a slice in the parent. And in service-content pass an array of items to be displayed