looping elements without a wrapper element in vuejs

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