How Can I Add A Element Everytime After 4 Elements In Vue.js?

I'm immigrating my code to Vue.js so pretty new to Vue. As you see the screenshot(link below), There are 4 columns inside div with columns class name. I was trying to use v-if to a

Solution 1:

You can access v-for iteration number like this:

change

 .column.is-3.vid(v-for='item in items')

to

.column.is-3.vid(v-for='(item, index) in items')

then somewhere where you need it check the index:

v-if="(index % 4 === 0) ? 'show it after every 4 elements' : ''"

for example, inject a span:

<spanv-if="index % 4 === 0">after 4</span>