javascript - v-for 中的未知属性使用 Vue

Question

我试图理解 v-for Vue JS 中的概念，我对这个框架非常陌生。
我正在使用 Django，这就是我使用自定义分隔符的原因。我有一个将对象列表添加到数据属性的示例脚本:

var app = new Vue({
    delimiters: ['[[', ']]'],
    el: '#app',
    data: {
        loading: true,
        datasetFilesArray: null
    },
    methods: {
        datasetFiles: function () {
            axios.get('api/list_all_data')
                .then(response => {
                    this.loading = false;

                    this.datasetFilesArray = response.data;
                })
                .catch(error => {
                    console.log(error)
                });
        }
    },
    beforeMount() {
        this.datasetFiles()
    }
});

最初 datasetFilesArray为null，但一旦收到响应，null就会被一个对象替换。
当我尝试在 HTML 标签中使用它时:

...
<tr v-for="content in datasetFilesArray">
    <th class="align-middle">
        <a href="">[[content.file_name]]</a>
    </th>
    <th class="align-middle">[[content.date]]</th>
</tr>
...

我收到一条错误消息，说 Property or method "content" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.但是当我添加 content 时一切正常至 data做:

...
data: {
    loading: true,
    datasetFilesArray: null
    content: null
},
...

但是 https://v2.vuejs.org/v2/guide/list.html#v-for-with-an-Object 中显示的示例, value关键字尚未初始化，它看起来像它的工作。
难道我做错了什么？
更新
我认为这可能会从 meta如 <meta http-equiv="X-UA-Compatible" content="ie=edge">标签，所以我将其从 content 更改为至 datasetItems我仍然得到同样的错误。
更新 2
我的页面示例 https://codepen.io/akshaybabloo/pen/ExxexxE
如果您看到开发人员工具，您将看到我所说的错误

Answer 1

编辑 这在我看来很可疑:

<tr v-for="content in datasetFilesArray">
    [[content]]

您不能将文本直接作为 <tr> 的子级。元素，它需要在 <td> 中或 <th> , 否则会被推到 <tr> 之外(请参阅下面我对 HTML 表格的评论)。

本质上，在 Vue 编译模板之前 DOM 是这样结束的:

[[content]]
<tr v-for="content in datasetFilesArray">

显然 content正在其范围之外使用，因此它被查找为组件实例的属性(生成的渲染函数包含在 with 语句中，它解释了这种魔力)，并且由于 content未在组件上定义 Vue 会引发此警告。然后您声明 content里面 data组件的属性，所以现在它被定义了，但所做的只是压制警告，使情况进一步复杂化。

试试这个:

<tr v-for="content in datasetFilesArray">
    <th>[[content]]</th>

最后，我建议你阅读 Why You Should Avoid Vue.js DOM Templates有关这方面的更多信息。

从您提供的内容中不清楚错误的原因是什么。你能提供一个 fiddle 吗？

该错误表明 content未在模板中使用的范围内声明。它由 v-for 声明, 所以 content 的任何用法在 <tr> 内应该是有效的。如果您使用 content模板中的其他任何地方都可能是导致此错误的原因。

还要检查您的 javascript 代码以查看您是否正在访问 this.content任何地方，尤其是可以从模板中执行的方法或计算属性。

HTML中的表格可能很挑剔；有时，当表格未正确标记时，浏览器会自动关闭元素。查看更改后错误是否仍然存在 <table> , <tr> , <th>和 <td>至 <div> .如果您可以提供完整的 HTML，将会有所帮助。