VueJS: How to output a comma separated array?
You can use conditional rendering to hide last , like following:
var demo = new Vue({
el: '#demo',
data: function() {
return {
lists: ['Vue', 'Angular', 'React']
};
}
})<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="demo">
<span v-for="(list, index) in lists">
<span>{{list}}</span><span v-if="index+1 < lists.length">, </span>
</span>
</div>If all you care about is comma separation, use Javascript's built-in join method:
{{ list.join(', ') }}
For arrays of objects, you could do something like this:
{{ list.map(entry => entry.title).join(', ') }}