带（导入的）子组件的嵌套v-for循环

Question

我有一个CategoryList组件，如下所示：

<div v-for="category in categories" v-bind:key="category.id">
  <span>{{ category.name }} </span>
  <SubcategoryList :subcategories="category.subcategories" />
</div>

及其类似的SubcategoryList子组件：

<ul>
    <li
      v-for="subcategory in subcategories"
      v-bind:key="subcategory.id"
    >{{subcategory.name}}</li>
</ul>

其中“类别”是对象数组，而“子类别”是每个“类别”对象中的数组例如：

[
    {
        "id": 1,
        "name": "CategoryName",
        "subcategories": [{}]
    }
]

SubcategoryList.vue正确导​​入，并且在我console.log'categories'时定义了'subcategories'。当我像下面将SubcategoryList模板直接放在CategoryList中时，就定义了“子类别”：

<div v-for="category in categories" v-bind:key="category.id">
    <span>{{ category.name }}</span>
    // SubcategoryList template below
    <ul> 
        <li
            v-for="subcategory in category.subcategories"
            v-bind:key="subcategory.id"
        >{{subcategory.name}}</li>
    </ul>
</div>

但是当我使用SubcategoryList作为子组件并将“ subcategories”作为道具传递时，我得到“属性或方法“ subcategories”未在实例上定义，但在渲染期间被引用”

Answer 1

请确保您在subcategories的props中声明了SubcategoryList：

export default {
  name: "SubcategoryList",
  props: {
    subcategories: {
      required: true,
      type: Array,
    },
  },
};