Vue战争：预期数组，得到对象

Question

我需要从 PHP 数组创建这个对象并将其解析为 JSON 到 Vue 对象。

Vue 对象：

 options: [
        {
          language: 'Javascript',
          libs: [
            { name: 'Vue.js', category: 'Front-end' },
            { name: 'Adonis', category: 'Backend' }
          ]
        },
        {
          language: 'Ruby',
          libs: [
            { name: 'Rails', category: 'Backend' },
            { name: 'Sinatra', category: 'Backend' }
          ]
        },
        {
          language: 'Other',
          libs: [
            { name: 'Laravel', category: 'Backend' },
            { name: 'Phoenix', category: 'Backend' }
          ]
        }
      ]

以 php 为例，我有下一个数组：

$testArray = [
13 => [
    'language' => 'languageTest',
    'libs' => [30 => ['name' => 'nameTest', 'id' => '30'],
               31 => ['name' => 'nameTest', 'id' => '31'],
               32 => ['name' => 'nameTest', 'id' => '32'],
    ]
],
14 => [
    'language' => 'languageTest',
    'libs' => [30 => ['name' => 'nameTest', 'id' => '30'],
               31 => ['name' => 'nameTest', 'id' => '31'],
               32 => ['name' => 'nameTest', 'id' => '32'],
    ]
]
];

如果我将它传递给“json”，我会得到以下结果。

{"13":{"language":"languageTest","libs":{"30":{"name":"nameTest","id":"30"},"31":{"name":"nameTest","id":"31"},"32":{"name":"nameTest","id":"32"}}},"14":{"language":"languageTest","libs":{"30":{"name":"nameTest","id":"30"},"31":{"name":"nameTest","id":"31"},"32":{"name":"nameTest","id":"32"}}}}

这让我在 Vue 组件中出现以下错误：https://vue-multiselect.js.org/#sub-option-groups

无效的道具：道具“选项”的类型检查失败。期望数组，得到对象。

我如何从 PHP 创建一个数组，但是当传递给 JSON 时，它对于 Vue 组件是正确的？

更新： 我通过赋值递归地创建这个数组。

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 ($childCategory->hasChildren() && $level < $maxLevel && $childCategory->getId() != 14) {
                    if ($this->categoryCanShow($childCategory)) {
                        $subLevel = $level + 1;
                        $arrayTreeCategory[$childCategory->getId()]['language'] = $childCategory->getName();
                        $arrayTreeCategory[$childCategory->getId()]['libs'] = $this->getChildCategoryTree($childCategory, $subLevel);
                    }
                } else {
                    if ($this->categoryCanShow($childCategory)) {
                        if ($level == 1) {
                            $arrayTreeCategory[99]['language'] = 'other';
                            $arrayTreeCategory[99]['libs'] = ['name' => $childCategory->getName(), 'id' => $childCategory->getId()];
                        } else {
                            $arrayTreeCategory[$childCategory->getId()] = ['name' => $childCategory->getName(), 'id' => $childCategory->getId()];
                        }
                    }
                }
            }
        }
    }

    return $arrayTreeCategory;
}

Answer 1

您传递的数组正在被转换为 JS 中的对象（当您在 PHP 中使用关联数组时）。

如果您不关心键（分别为 13 和 14），只需像这样删除键：

$testArray = [
    [
        'language' => 'languageTest',
        'libs' => [30 => ['name' => 'nameTest', 'id' => '30'],
            31 => ['name' => 'nameTest', 'id' => '31'],
            32 => ['name' => 'nameTest', 'id' => '32'],
        ]
    ],
    [
        'language' => 'languageTest',
        'libs' => [30 => ['name' => 'nameTest', 'id' => '30'],
            31 => ['name' => 'nameTest', 'id' => '31'],
            32 => ['name' => 'nameTest', 'id' => '32'],
        ]
    ]
];

如果您确实关心 ID，您有 2 个选择：

选项 1 - 将 id 移动到内部数组，如下所示：

$testArray = [
    [
        'id' => 13,
        'language' => 'languageTest',
        'libs' => [30 => ['name' => 'nameTest', 'id' => '30'],
            31 => ['name' => 'nameTest', 'id' => '31'],
            32 => ['name' => 'nameTest', 'id' => '32'],
        ]
    ],
    [
        'id' => 14,
        'language' => 'languageTest',
        'libs' => [30 => ['name' => 'nameTest', 'id' => '30'],
            31 => ['name' => 'nameTest', 'id' => '31'],
            32 => ['name' => 'nameTest', 'id' => '32'],
        ]
    ]
];

选项 2：将道具类型更改为 Object 并确保在代码中应用一些调整，以便它可以按照您最初的计划和设计工作。