Question

我正在尝试理解Vue JS中的v-for概念，并且对这个框架我还很陌生。

我正在使用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://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>中，否则它将被推到{{ 1}}（请参阅下面有关HTML表的评论）。

基本上，DOM会像这样之前结束，Vue会编译模板：

<tr>

很明显，[[content]] <tr v-for="content in datasetFilesArray">在其作用域之外使用，因此它被视为组件实例的属性（生成的渲染函数包装在with语句中，这解释了这种魔术），并且由于未在组件上定义content，因此Vue会发出此警告。然后，您在组件的content属性内声明了content，现在就可以定义了，但所做的只是抑制警告，使情况更加复杂。

尝试以下方法：

data

最后，我建议您阅读Why You Should Avoid Vue.js DOM Templates，以获取有关此信息的更多信息。

根据您所提供的信息，不清楚导致错误的原因是什么。你能提供一个小提琴吗？

该错误表明<tr v-for="content in datasetFilesArray"> <th>[[content]]</th>没有在模板中使用的范围内声明。它由content声明，因此v-for中content的任何用法都应有效。如果您在模板中的其他任何地方使用<tr>，则可能是导致此错误的原因。

还要检查您的JavaScript代码，以查看您是否在任何地方访问content，尤其是通过可在模板内执行的方法或计算出的属性。

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

v-for Vue中的未知属性

1 个答案: