Vue.js - Why cant i insert to the html table?

Question

I am currently working on a table where I want to show data of a robot. The li works fine, but the table will not show the data. I am using vue.js 2 btw. Does anyone know where my mistake is?

<template>
    <div class="stats">
        Statistiken
        <table>
            <thead>
            <tr>
                <th v-for="maschine in userdaten.maschinen" :key="maschine.maschineId">
                    {{maschine.maschineId}}
                </th>
            </tr>
            </thead>
            <tbody id="tableData">
            <tr>
                <td v-for="feed in maschine.feeds" :key="feed.feedsId ">
                    {{feed.feedsId}} - {{feed.datum}}
                </td>
            </tr>
            </tbody>
        </table>

        <li v-for="maschine in userdaten.maschinen" :key="maschine.maschineId">
            {{maschine.maschineId}}
            <ul v-for="feed in maschine.feeds" :key="feed.feedsId">
        
                <div id="before"
                     v-if="feed.datum >= '2020-10-03' + ' 00:00:00' && feed.datum <= '2020-10-03' + '23:59:59'"
                     style="margin-left: 300px; color: red">
                    {{feed.feedsId}} - {{feed.datum}}
                </div>
                <!--<div id="after" v-else>
                    {{feed.feedsId}} - {{feed.timestamp}}
                </div>-->
            </ul>
        </li>
    </div>
</template> ```

fyi, <li> element must be contained in a parent element, <ol>, <ul> or <menu> — user8034901
– user8034901, Commented Feb 14, 2021 at 11:09
Anything in the browser console, any errors? :key="feed.feedsId " remove that space maybe. Do you know of the VueDevTools browser addon? — user8034901
– user8034901, Commented Feb 14, 2021 at 11:12

Dharman · Accepted Answer · 2021-02-15 07:10:57Z

1

This doesn't work because the v-for in the tbody is incorrect. The variable maschine here is undefined. The first v-for in the thead is already done. That's why the variable maschine in the second v-for is undefined.

To make it work, replace your tbody with the following

<tbody id="tableData">
    <tr>
        <td v-for="maschine in userdaten.maschinen" :key="maschine.maschineId">
            <ul>
                <li v-for="feed in maschine.feeds" :key="feed.feedsId ">{{feed.feedsId}} - {{feed.datum}}</li>
            </ul>
        </td>
    </tr>
</tbody>

If it doesn't give you the desired format, show me the userdaten structure and I can help you.

edited Feb 15, 2021 at 7:10

Dharman♦

33.9k27 gold badges105 silver badges157 bronze badges

answered Feb 15, 2021 at 7:04

MAW

9718 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue.js - Why cant i insert to the html table?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related