Vue.js Vue:列表呈现返回错误

我只是试图在我的视图中呈现一个列表，我一直看到错误：

[Vue warn]: Property or method "client" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

以下是我的看法：

<div class="col-xs-6 col-xs-offset-3 text-center" id="vueapp">
    <div class="table table-awaken" v-if="clients">
        <thead>
            <tr>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="client in clients">
                <td>{{ client }}</td>
            </tr>
        </tbody>
    </div>
</div>

var vote = new Vue({
    el: "#vueapp",
    data: {
        clients: [
            { name: 'x' }
        ]
    }
})

---

这是因为

thead

和

tbody

不是

表

元素的子元素。当你打破HTML规则时，浏览器会做一些有趣的事情

请参阅这些说明tbody和thead必须是表的子项的文档

如果将这些元素包装在

表中

元素中，它将开始工作。我不确定这是因为Vue还是浏览器

请尝试以下HTML：

<div class="col-xs-6 col-xs-offset-3 text-center" id="vueapp">
    <div class="table table-awaken">
    <table>
        <thead>
            <tr>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="client in clients">
                <td>{{ client }}</td>
            </tr>
        </tbody>
        </table>
    </div>
</div>

名字
{{client}}

---

这里有一个正在工作的JSFIDLE:

就是它！我不知道为什么我把它做成了

而不是

。谢谢！