hjortur17
1 month ago
205
3
Vue

V-For only first 20 items and then rest

Posted 1 month ago by hjortur17

Hi, I'm trying to print out the first 20 items (0-19) and then 20-29 and 30-39 and but titles in between. See example:

<tbody>
    <div v-for="ingredient in recipes[indexLoop].ingredients">
        <h4 class="uppercase font-bold text-base" v-text="ingredient.firstTitle"></h4>
        <tr class="flex" v-for="(step, index, key) in (ingredient).slice(0, 19)" v-if="key == index">
            <td class="py-2 border-b border-primary-gray w-full" v-if="step">
                <p class="text-sm capitalize" v-text="step"></p>
            </td>
        </tr>

        <h4 class="uppercase font-bold text-base" v-text="ingredient.secondTitle"></h4>
        <tr class="flex" v-for="(step, index, key) in (ingredient).slice(20, 29)" v-if="key == index">
            <td class="py-2 border-b border-primary-gray w-full" v-if="step">
                <p class="text-sm capitalize" v-text="step"></p>
            </td>
        </tr>
                                                        
        <h4 class="uppercase font-bold text-base" v-text="ingredient.thirdTitle"></h4>
        <tr class="flex" v-for="(step, index, key) in ingredient" v-if="key == index">
            <td class="py-2 border-b border-primary-gray w-full" v-if="step">
                <p class="text-sm capitalize" v-text="step"></p>
            </td>
        </tr>
    </div>
</tbody>

But Vue is not allowing my to slice ingredient

Please sign in or create an account to participate in this conversation.