[Vuejs]-Vue js template tag not rendering

by

1👍

If you want two tr you have to call the component twice in the parent, but you cannot have multiple root elements in a component. Just delete the template tag leaving a tr as the root and call the component as many times as you want

0👍

Probably the purest work around is just to use another <t-body> element honestly:

Mind you, tables are a bit tricky in Vue, you don’t just insert components into the table, you use the is property on an HTML element and pass the component name, something like this should work:

<tbody is="company"></tbody>

Now change template to t-body in your component, your table looks like this now:

<tbody is="company"></tbody>
<tbody>
  // the rest of your rows go here
</tbody>

You could also nest the tbody elements within each other, it’s not necessarily valid HTML, but browsers above IE 10 won’t have issues.

0👍

I just started learning vue and a similar thing happened to me where I had written the code just fine. Was using vue create app with the cli and I deleted main.js and App.vue and then recreated it outside of the src fldr and they weren’t working so I tried to drag and drop them back in the src folder and it still wasn’t working so I guess vue just doesn’t like when you create those things outside of the src folder it just breaks things. I fixed it by just deleting the whole app and remaking it except this time I didn’t move those files out of the src file and the exact same code worked just fine. Not sure if anyone else has had this same issue but ye I think a lot of frameworks just don’t like when you mess with the file structure too much.

-1👍

I think @Ohgodwhy’s answer is the best one.
If you absolutely need valid html, you can also put a table inside the td

https://codepen.io/sqram/pen/Jmzeyr

Vue.component('company', {
  name: "company",
  data () {
    return {
      companies: [
        { name: 'ford', country: 'us' },
        { name: 'fiat', country: 'it'}
      ]
    }
  },
  template:`
      <table>
        <tr v-for="c in companies">
          <td>{{ c.name }}</td>
          <td>{{ c.country }}</td>
        </tr> 
      </table>`
})

new Vue({
  el: '#app'
});


<div id="app">
  <table border="1">
    <tr>
      <td>
        <company />
      </td>
    </tr>    
  </table>
</div>

Leave a comment