title: Rendering TRs in Vue using a custom component
body: <p>While I can render an HTML table fine using v-for and inline mustache syntax, I cannot achieve the same result using a component.</p>
  
  <p>Vue / the browser removes the wrapping TABLE tag and inserts TRs outside a TABLE context, so they do not render properly:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"&gt;&lt;/script&gt;
  
  &lt;div id="app"&gt;
  
    &lt;h2&gt;Vue table rows inline (works)&lt;/h2&gt;
    &lt;table border="1"&gt;
      &lt;tr&gt;
        &lt;th&gt;Name&lt;/th&gt;
        &lt;th&gt;Value&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr v-for="(row, index) in mydata"&gt;
        &lt;td&gt;{{row.name}}&lt;/td&gt;
        &lt;td&gt;{{row.value}}&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  
    &lt;h2&gt;Vue table rows using component (broken)&lt;/h2&gt;
    &lt;table border="1"&gt;
      &lt;tr&gt;
        &lt;th&gt;Name&lt;/th&gt;
        &lt;th&gt;Value&lt;/th&gt;
      &lt;/tr&gt;
      &lt;my-row v-for="(row, index) in mydata" :key="row.name" :name="row.name" :val="row.value"&gt;&lt;/my-row&gt;
    &lt;/table&gt;
  
  &lt;/div&gt;
  
  &lt;script&gt;
    Vue.component('my-row', {
      props: ['name', 'val'],
      template: '&lt;tr&gt;&lt;td&gt;{{name}}&lt;/td&gt;&lt;td&gt;{{val}}&lt;/td&gt;&lt;/tr&gt;'
    })
  
    new Vue({
      el: "#app",
      data: {
        mydata: [{
            name: "A",
            value: 1
          },
          {
            name: "B",
            value: 2
          },
          {
            name: "C",
            value: 3
          }
        ]
      }
    })
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>You can see this also at <a href="https://jsfiddle.net/MCAU/eywraw8t/128217/" rel="nofollow noreferrer">https://jsfiddle.net/MCAU/eywraw8t/128217/</a></p>
  
  <p>What do I need to do to get the component version to work? (Adding a TBODY doesn't make any difference.)</p>