Vue：列表渲染返回错误

Question

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

[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>

还有我的 vue 实例：

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

Answer 1

这是因为您有 thead 和 tbody 不是 table 元素的子元素。当你打破这样的 HTML 规则时，浏览器会做一些有趣的事情。

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

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead

如果您将这些元素包装在 table 元素中，它就会开始工作。我不确定这是因为 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>

这是一个有效的 jsfiddle：https://jsfiddle.net/kg638x4f/