CODEWITHSUNDEEP
vue.jsv-for
Kypaku
Kypaku

Reputation: 21

VueJS: How to render several elements per cycle?

I need to render the next list:

<ul id="list">
  <li class="type-1-0">some content</li>
  <li class="type-1-1">some content</li>
  ...
  <li class="type-99-0">some content</li>
  <li class="type-99-1">some content</li>   
</ul>

Can I use the "v-for" directive for this?

Upvotes: 1

Views: 98

Answers (1)

Bert
Bert

Reputation: 82459

Use a range v-for in combination with a template tag.

<ul id="list">
  <template v-for="n of 99">
    <li :class="`type-${n}-0`">some content</li>
    <li :class="`type-${n}-1`">some content</li>
  </template>
</ul>

Here is an example.

console.clear()

new Vue({
  el: "#app"
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
  <ul id="list">
    <template v-for="n of 99">
      <li :class="`type-${n}-0`">{{`type-${n}-0`}}</li>
      <li :class="`type-${n}-1`">{{`type-${n}-1`}}</li>
    </template>
  </ul>
</div>

Note: if you need to support IE, you will either need to use the template tag in a string template (or single file component) or use a render function instead. because template is not supported in IE.

Upvotes: 1

Related Questions