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

Posted 2023-02-16

【中文标题】Vue战争：预期数组，得到对象

【英文标题】：Vue war: Expected Array, got Object

【发布时间】：2020-06-12 14:18:45

【问题描述】：

我需要从 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;

【参考方案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 并确保在代码中应用一些调整，以便它可以按照您最初的计划和设计工作。

【讨论】：

感谢您对@MyLibrary 的回复。但是我怎么能以同样的方式使用递归方法并在数组中添加数据呢？更新主帖