Javascript Vue:模板根目录不允许v-for指令

我试图创建一个简单的post-list组件，其中使用了

v-for

指令，但我看到了以下错误：

"eslint-eslint: the template root disallows v-for directives"

我应该如何循环和渲染每个帖子

我将

allbehaviorposts

作为道具从Laravel后端传递到组件，如下所示：

我的组成部分：

{{behavior.postcategory.name}
{{behavior.title}}
导出默认值{
道具：['RelatedBehaviorPosts']，
数据：函数（）{
返回{
//资料
}
},
安装的（）{
console.log（'已装入页脚'）
}
}

每个组件只能包含一个，这排除了根元素上的或。您必须将列表包装在另一个元素（例如，

div

）中，使其成为根：

还要注意的是，Vue 2不支持属性绑定中的字符串插值，因此必须用以下语法的数据绑定替换：

:ATTRIBUTE_NAME="VALUE"

特别是，替换以下内容：

使用此（使用）：

或者使用此选项（使用字符串连接）：

---

我有时会遇到这个错误，问题是模板根目录不允许“v-for”指令。在模板中使用指令的解决方案是，您需要提供一个根div来包含包含指令的元素。 这在我的情况下奏效了。查看此处了解更多信息

一些项目

<template>
<!-- place a root element -->
<div>
 <div v-for='item in menu'>some items</div>
</div>
</template>