[Vuejs]-Render table in Vue template

by

2👍

✅

You can use <template></template> tag.

<template> tag doesn’t render itself as an element, but you can use it for conditions and loops in vue.

<template>
<div class="container" id="ProbabilityTable">
   <div id="v-for-object">
     <table>
      <template v-for="(data, key) in table(html)">
        <thead v-if="key === 'header'">
        // render table header
        </thead>
        <tbody v-if="key === 'body'">          
        // render body header
        </tbody>
      </template>
      </table>
      </div>
    </div>
</template>
👤Julian Paolo Dayag

0👍

Do a for loop for your header and your body separate then you don’t need to make an extra div or template.

<table>
  <thead>
    <tr v-for="(row, headerKey) in table(html).header" :key="headerKey">
      <td>{{ row }}</td>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(row, bodyKey) in table(html).body" :key="bodyKey">
      <td>{{ row }}</td>
    </tr>
  </tbody>
</table>
👤EnzoTrompeneers

-2👍

The 2 snippets you posted are interpreted the same. And both of them are wrong.

As stated here https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table divs are not a valid content for tables. And because of this, every browser will interpret the error differently.

Solution: use valid HTML syntax and see if the problem persists.

👤Strattegic

Leave a comment