如何将PHP关联数组转为符合Vue组件要求的JSON数组？

问题根源 #

你遇到的报错核心有两个：

1. 类型不匹配：Vue-multiselect要求options是数组类型，但你PHP生成的是带自定义数字键的关联数组，转JSON后变成了对象，直接触发组件的类型校验失败。
2. 结构不匹配：部分逻辑里libs被直接赋值为单个对象，而组件要求libs必须是包含多个对象的数组；同时还缺少Vue组件需要的category字段。

解决方案 #

修改PHP递归函数，确保所有需要转成JSON数组的结构都用索引数组（通过[]追加元素，而非自定义键）生成，同时修正libs的结构并补充必填字段：

private function getChildCategoryTree($category, $level = 1, $maxLevel = 2) {
    $arrayTreeCategory = []; // 初始化索引数组，而非关联数组
    if ($category->hasChildren()) {
        $childCategories = $this->getSubcategories($category);
        if (count($childCategories) > 0) {
            foreach ($childCategories as $childCategory) {
                if ($this->categoryCanShow($childCategory)) {
                    if ($childCategory->hasChildren() && $level < $maxLevel && $childCategory->getId() != 14) {
                        $subLevel = $level + 1;
                        // 直接追加到索引数组，不用分类ID作为键
                        $arrayTreeCategory[] = [
                            'language' => $childCategory->getName(),
                            'libs' => $this->getChildCategoryTree($childCategory, $subLevel)
                        ];
                    } else {
                        if ($level == 1) {
                            // 检查是否已存在'other'分组，避免重复创建
                            $otherGroupIndex = -1;
                            foreach ($arrayTreeCategory as $index => $item) {
                                if ($item['language'] === 'other') {
                                    $otherGroupIndex = $index;
                                    break;
                                }
                            }
                            
                            $libItem = [
                                'name' => $childCategory->getName(),
                                'category' => 'Backend', // 按Vue要求补充字段，可根据业务调整
                                'id' => $childCategory->getId()
                            ];
                            
                            if ($otherGroupIndex !== -1) {
                                // 将当前项追加到已存在的other分组的libs数组
                                $arrayTreeCategory[$otherGroupIndex]['libs'][] = $libItem;
                            } else {
                                // 不存在则创建新的other分组
                                $arrayTreeCategory[] = [
                                    'language' => 'other',
                                    'libs' => [$libItem]
                                ];
                            }
                        } else {
                            // 直接追加到索引数组，作为libs的子元素
                            $arrayTreeCategory[] = [
                                'name' => $childCategory->getName(),
                                'category' => 'Backend', // 补充Vue所需字段
                                'id' => $childCategory->getId()
                            ];
                        }
                    }
                }
            }
        }
    }
    return $arrayTreeCategory;
}

关键修改点说明 #

1. 索引数组替代关联数组：
   • 去掉了用$childCategory->getId()作为数组键的写法，改用$arrayTreeCategory[] = ...直接追加元素，这样PHP生成的是连续索引数组，转JSON后就是Vue需要的数组类型。
2. 修正libs结构：
   • 当level == 1时，不再直接给libs赋值单个对象，而是将子项放入数组中；同时增加了分组检查逻辑，避免重复创建'other'组，确保同类型子项都归到同一分组下。
3. 补充Vue必填字段：
   • 按Vue组件的要求，给每个libs元素补充了category字段，你可以根据实际业务逻辑调整这个值（比如从分类数据中动态获取）。

验证效果 #

修改后生成的PHP数组转JSON后，会变成类似这样的结构，完全符合Vue-multiselect的要求：

[
  {
    "language": "前端框架",
    "libs": [
      {"name": "Vue.js", "category": "Front-end", "id": "20"},
      {"name": "React", "category": "Front-end", "id": "21"}
    ]
  },
  {
    "language": "other",
    "libs": [
      {"name": "Laravel", "category": "Backend", "id": "30"}
    ]
  }
]

内容的提问来源于stack exchange，提问作者chdzma