[Vuejs]-Can I use a <tr> tag inside a <tr> in Vue.js?

by

2👍

✅

You can wrap you trs with tbody(or just with template tag) and use only one v-for:

 <tbody v-for="(item,index) in itemList" :key="index">
    <tr class="left-align">
        <td>{{item.items}}</td>
    </tr>
    <tr class="left-align">
        <td>{{item.items}}(future)</td>
    </tr>
    <tr class="left-align">
        <td>GAP</td>
    </tr>
 </tbody>
👤Max Sinev

0👍

In HTML, it is not allowed to write a tr in a tr as far as I know. You should be able to achieve what you want with a table though.

<template>
  <td>
    <table>

<tr class="left-align"  v-for="(item,index) in itemList" :key="index.id">
    <td>{{item.items}}</td>
</tr>
<tr class="left-align"  v-for="(item,index) in itemList" :key="index.id">
    <td>{{item.items}}(future)</td>
</tr>
<tr class="left-align"  v-for="(item,index) in itemList" :key="index.id">
    <td>GAP</td>
</tr>

    </table>
  </td>
</template>

expected output should be:

<tr>
  <td>
    <table>

<tr>
    <td>
    </td>
</tr>

<tr>
    <td>
    </td>
</tr>

    </table>
  </td>
</tr>

A good old way to handle this kind of error is to use a HTML Validator. Your HTML should not throw any errors nor warning. Try copy/paste this for example:

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>sd</title>
</head>
<body>

<table>
<tr>
<td>
<table>
    <tr>
        <td>
            foo
        </td>
    </tr>

    <tr>
        <td>
            bar
        </td>
    </tr>
</table>
</td>
</tr>
</table>

</body>
</html>
👤aloisdg

Leave a comment