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/

Vue：列表渲染返回错误

1 个答案: