Question

我想使用vue.js渲染表格，但是我遇到了很多问题。我不知道如何使用v-for渲染它。我尝试了几乎所有的东西..在控制台一切看起来还不错，但桌子很清楚。怎么做正确？

<template>
        <table class="table table-striped ">
          <thead>
            <tr>
              <th></th>
              <th>Name</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="users in usr" :is="users" :usr="users">
                <td>{{usr.name}}</td>
                <td>{{usr.name}}</td>
            </tr>
          </tbody>
        </table>
</template>

<script>
    export default {
        props: [
            'user',
            'users'
        ],
        data: function () {
          return {
            usr: [],
            }
        },
    }
</script>

Answer 1

我不确定您使用的是哪种数据，但我们假设您在users中有一组用户对象

<tr v-for="user in users" :key="user.name">
    <td>{{user.name}}</td>
    <td>{{user.name}}</td>
</tr>

这将遍历user中的每个users对象。 user这里是别名，意思是它可以是任何东西。

<tr v-for="dumbledore in users" :key="dumbledore.name">
    <td>{{dumbledore.name}}</td>
    <td>{{dumbledore.name}}</td>
</tr>

会工作

为什么我的vue.js表不会渲染？

1 个答案: