v-for를 사용하여 어레이의 일부만 반복하는 방법

v-for를 사용하여 어레이의 일부만 반복하는 방법

다음과 같은 배열이 있다.

return {
   items: [
      {active: true, text: 'text1'},
      {active: true, text: 'text2'},
      {active: true, text: 'text3'},
      {active: true, text: 'text4'},
      {active: true, text: 'text5'}
      ...
   ]
}

다음을 사용하여 DOM에 반복하고 싶다.v-for(쉽게) 그러나 두 개의 템플릿(템플릿1의 어레이 처음 3개 요소와 템플릿2의 나머지 요소)으로 반복하고 싶다.

template1:

<template v-for="item in items">
   first 3 elements:
   {{item}}
</template>

템플릿2:

<template v-for="item in items">
   the rest of elements: 
   {{item}}
</template>

어떻게 수정해야 하는가?v-for이 일을 성사시키기 위해?

원본에 기반하여 두 개의 계산된 속성을 명시적으로 만들 수 있음items배열 또는 슬라이스만 사용(예:

<template v-for="item in items.slice(0, 3)">

, 그리고

<template v-for="item in items.slice(3)">

N.B. 위의 두 경우 모두 다음과 같이 가정한다.items항상 정의되고 항상 배열되어 있다.인라인 어프로치(인라인 어프로치)를 원하신다면.items정의되지 않았을 수도 있고, 그러면 당신은(items || []).slice().

계산된 속성 접근 방식을 사용하면 다음과 같은 것을 정의할 수 있다.

computed: {
    itemsHead() {
        return this.items ? this.items.slice(0, 3) : [];
    },
    itemsTail() {
        return this.items ? this.items.slice(3) : [];
    }
}

그러면 참고하십시오.itemsHead, 그리고itemsTail네 템플릿에 말이야.

조금 더 복잡한 물체를 가지고 있다면, 예를 들어 조건이 진실이라면 무언가를 렌더링하려고만 하는 외부 루프와 내부 루프가 있고 내부 루프에 있는 것처럼 계산된 방법을 사용할 수 없는 경우.루프 내부 계산 방법에 대해 사실이 아니라면 수정하십시오.

그래서 제 해결책은 다음과 같다.

<div v-for="fooparent in fooparentarray">
<template v-for="foo in fooparent.foos">
<div v-if="foo.someproperty === 1">{{foo.someproperty}}</div>
</template>
</div>

템플릿이 렌더링되지 않기 때문에 조건을 충족하지 않는 배열 요소에 렌더링되는 것은 없을 것이다.그래서 div는 조건이 충족될 때만 렌더링된다.

참조URL: https://stackoverflow.com/questions/48987214/vuejs-how-to-iterate-only-part-of-array-using-v-for