Is there a way I can add a new element between every two items generated by v-for in Vue.js, similar to using Array.join()?
Background:
I would like to insert a <span>,</span> between every pair of
<router-link></router-link>The
<router-link></router-link>v-for, as shown below:
<router-link tag="a"
v-for="text in ['vue', 'react', 'JQuery']"
:key="text"
>
{{ text }}
</router-link>
When rendered, the output looks like this:
vue react JQuery
In order to achieve the desired structure, I had to enclose the elements within a <div>:
<div v-for="text in ['vue', 'react', 'JQuery']"
:key="text">
<router-link tag="a">
{{ text }}
</router-link>
<span>, </span>
</div>
The resulting output now appears as follows:
vue, react, JQuery,
However, the last comma is unnecessary. To rectify this, I utilized v-show:
<div v-for="(text, index) in ['vue', 'react', 'JQuery']"
:key="text">
<router-link tag="a">
{{ text }}
</router-link>
<span v-show="index !== 2">, </span>
</div>
This solution works effectively, but I am curious if there is a simpler way to accomplish this task.
Thank you for any assistance on this matter.