vue.js double v-for in list

Question

So I'm using vue.js in my project and I've got a question: how could I display elements of v-for inside of another v-for as list items or select options? I have abstractly something like:

<div v-for='item in items'>
  <div v-for='element in item.elements'>
    ...
  </div>
</div>

Would highly appreciate any possible help, thanks!

Answer 1

You can use a <template> tag so as not to render an extra div.

<ul>
 <template v-for='item in items'>
  <li v-for='element in item.elements'>
    {{element.title}}
  </li>
 </template>
</ul>

<template> tag is not supported in IE however. A universal solution would be to make a computed variable that returns all of the titles:

computed:{
  titles:function(){
    var titles = [];
    for(var i = 0; i < this.items.length; i++){
      for(var k = 0; k < this.items[i].length; k++){
        titles.push(this.items[i][k].title);
      }
    }
    return titles;
  }
}

Then you can just do v-for="title in titles"