зацикливание элементов без элемента-оболочки в vuejs - PullRequest
Новая
       7

зацикливание элементов без элемента-оболочки в vuejs

0 голосов
/ 28 октября 2019

У меня есть следующий код, который я хотел бы сгенерировать с помощью 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>

Но мне нужно держать их в том же порядке, то есть label сразу послеэлемент radio input, я знаю v-for на теге input или элемент label сначала сгенерирует все input s, а затем все label s

Есть ли способсделать это с помощью vuejs v-for, чтобы я мог сохранить порядок элементов и сгенерировать их с помощью цикла?

1 Ответ

3 голосов
/ 28 октября 2019

Вы можете использовать тег шаблона как

Элемент шаблона содержит HTML-код без его отображения 

<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>

Если вы хотите выполнить циклическое перемещение по элементам вв обратном порядке вы должны сделать это сами

...