vue js v-for loop display item only once

Question

I wish to display an arrow in between my looped v-for divs, but not on the last one. How can I achieve this in Vue JS? Ideally I'd the loop to break and not control this element at all, but may have to go with a css last of type solution.

<div class="row">
    <div v-for="events in list.events" >
        <div class="medium-4 columns" >
            <div class="card">
                <img src="http://placehold.it/400x200"></br>
                @{{events.title}}
                @{{events.start}} - @{{events.end}}
            </div>
        </div>
        <div class="medium-1 columns arrow" >
            <i class="fa fa-arrow-circle-right" aria-hidden="true"></i>
        </div>
    </div>
</div>

panepeter · Accepted Answer · 2017-02-27 10:46:38Z

2

You can compare the $index value to the length of the array: v-if="$index != (list.events.length - 1)"

<div class="row">
    <div v-for="events in list.events" >
        <div class="medium-4 columns" >
            <div class="card">
                <img src="http://placehold.it/400x200"></br>
                @{{events.title}}
                @{{events.start}} - @{{events.end}}
            </div>
        </div>
        <div class="medium-1 columns arrow" v-if="$index != (list.events.length - 1)">
            <i class="fa fa-arrow-circle-right" aria-hidden="true"></i>
        </div>
    </div>
</div>

For the css solution, check out the :last-of-type pseudo-class:

.arrow:last-of-type{
  display:none;
}

edited Feb 27, 2017 at 10:46

panepeter

4,3423 gold badges36 silver badges48 bronze badges

answered Apr 20, 2016 at 12:59

Jeff

25.3k4 gold badges73 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

vue js v-for loop display item only once

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related