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>

Answer 1

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;
}