looping elements without a wrapper element in vuejs - vue.js

Question

I have the following code which I would like to generate through a v-for:
<div class="rating-container">
<input type="radio" name="star" value="5" id="star-5">
<label class="star-radio" for="star-5">5</label>
<input type="radio" name="star" value="4" id="star-4">
<label class="star-radio" for="star-4">4</label>
<input type="radio" name="star" value="3" id="star-3">
<label class="star-radio" for="star-3">3</label>
<input type="radio" name="star" value="2" id="star-2">
<label class="star-radio" for="star-2">2</label>
<input type="radio" name="star" value="1" id="star-1">
<label class="star-radio" for="star-1">1</label>
</div>
But I need to keep them in the same order, I mean, a label right after the radio input element, I know v-for on the input tag or the label element would generate all the inputs first and then all the labels
Is there any way to do this with vuejs v-for so that I can preserve the element order and generate them with a loop ?

Answer 1

You could use the template tag as
The template element holds HTML code without displaying it
<div id="app">
<div class="rating-container" >
<template v-for="n in 5">
<input type="radio" name="star" :value="n" :id="'star-'+ n">
<label class="star-radio" :for="'star-'+ n">{{n}}</label>
</template>
</template>
</div>
If you want to loop trough the items in a reversed way you have to do it yourself