为什么我的 vue.js 表无法呈现？

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>

这将遍历users每个user对象。 user在这里是一个别名，这意味着它可以是任何东西。

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

将工作