Vuejs v-for loop with tag combination

Question

I want to loop two list tags for every loop of v-for without looping ul. Is there any internal looping available in vuejs to escape the ul tag by getting looped or is there any other method.

<ul id="example-1" v-for="(item, index) in items" :key="item.message">
  <li >
    {{ item.message }}
  </li>
  <li>
   {{ item.text}}
  </li>
</ul>

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo', text: "baz" },
      { message: 'Bar', text: "quz" }
    ]
  }
})

The obvious result that i can get is :

Foo

Bar

baz

quz

The result That i need:

Foo

baz

Bar

quz

Answer 1

You can loop on a <template> tag.

<ul id="example-1">
  <template v-for="item in items">
    <li>
      {{ item.message }}
    </li>
    <li>
     {{ item.text}}
    </li>
  </template>
</ul>

If you are using Vue <= 2.x, then you will need to assign keys to the inner elements, since templates cannot be keyed.

If you are using Vue 3.x, then you should assign a key to the <template>. This is a breaking change from earlier releases.