CODEWITHSUNDEEP
vue.jsv-for
Towkir
Towkir

Reputation: 4004

looping elements without a wrapper element in vuejs

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 ?

Upvotes: 1

Views: 1470

Answers (1)

dreijntjens
dreijntjens

Reputation: 4825

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

Upvotes: 8

Related Questions