title: vue.js: loop + component + if/else?
body: <p>I have the following</p>
  
  <pre><code>&lt;tabs&gt;
      //If tab.name is not null
      &lt;tab v-for="tab in tabs" :key="tab.id" :name="tab.name" :suffix="tab.id"&gt;
      &lt;/tab&gt;
      //If tab.name is null
      &lt;tab v-for="tab in tabs" :key="tab.id" :name="tab.id"&gt;
      &lt;/tab&gt;
  &lt;/tabs&gt;
  </code></pre>
  
  <p>I want to run a loop for my data and render the component differently based on my condition.</p>
  
  <p>I can't for the life of me figure out how to do that. <code>v-else</code> requires another element declaration, but if you put <code>v-for</code> in both it will just run the loop twice. I tried <a href="https://stackoverflow.com/questions/42634908/v-if-and-v-else-inside-of-v-for-for-different-text-rendering">this</a> but it doesnt seem to work in my case. If I do <code>&lt;template :name="tab.name"&gt;</code> the component says it's missing the required property <code>name</code>.</p>
  
  <p>How is this supposed to work in vue?</p>