Javascript Vue js在数据子属性中迭代不起作用

我是Vue新手，正在尝试使用带有嵌套组件的Vue将元素与相当复杂的数据对象绑定

我相信我已经根据文档正确地设置了这个，但是我没有看到任何与我的情况完全匹配的示例

我得到的错误是

vue.js:584[vue warn]：属性或方法“派系”未在实例上定义，而是在呈现过程中被引用。

此消息针对标记中引用的每个json对象属性显示。我猜这里有一些相对简单的东西，我没有找到，但我无法确定那是什么。非常感谢您的帮助，谢谢

这是一把小提琴：

以及守则：

var x={
“派系”：[
{
“id”：0，
“名称”：“未知”，
“img”：“Unknown.png”
},
{
“id”：1，
“名称”：“光”，
“img”：“Light.png”
},
{
“id”：2，
“名称”：“黑暗”，
“img”：“Dark.png”
}
],
“角色”：[
{
“id”：0，
“名称”：“未知”，
“img”：“Unknown.png”
},
{
“id”：1，
“姓名”：“刺客”，
“img”：“刺客.png”
},
{
“id”：2，
“姓名”：“法师”，
“img”：“Mage.png”
}
],
“缓存日期”：1521495430225
};
console.log（“数据对象”，x）；
Vue.component（“过滤项”{
模板：`

{{name}}
`}）；
组件（“筛选项”{
模板：`

`}）；
var v=新的Vue({
el:“过滤器”，
数据：x
});

派系

属于根Vue实例，

筛选器项

具有不同的

数据

对象。您可能希望将

派系

作为道具传递给

筛选项目

Vue.component（“过滤项”{
道具：[“派系”]，
模板：`

`}）；
var v=新的Vue({
el:“过滤器”，
数据：x
});

---

编辑：

v-repeat

已被弃用，请使用

v-for

，并且您没有将道具向下传递到

筛选项目
，您必须在这些子组件中声明每个要传递给子组件的
道具的数据。此外，您需要使用
：fieldnameinchild=“value”
（v-bind的缩写：fieldnameinchild=“value”
）从父级传递每个道具

在您的情况下，您需要在几个地方执行此操作：

家长：

<filter-items :factions="factions" :roles="roles"></filter-items>





<filter-items :factions="factions" :roles="roles"></filter-items>

<filter-item v-for="f in factions" :img="f.img" :fimg="f.fimg" :name="f.name" :key="'f'+f.id"></filter-item>
<filter-item v-for="r in roles" :img="r.img" :fimg="r.fimg" :name="r.name" :key="'r'+r.id"></filter-item>