Laravel VueJS - 输入值数组返回字符串而不是数组

Posted 2023-02-22

【中文标题】Laravel VueJS - 输入值数组返回字符串而不是数组

【英文标题】：Laravel VueJS - Input value array returns strings instead of array

【发布时间】：2021-07-31 19:12:36

【问题描述】：

标题可能令人困惑，但我会解释一下。在我的 VueJS 组件中，我有一个名为 selectedProducts = [] 的数组。我通过单击按钮将产品添加到数组中，并且可以执行常规操作，例如循环遍历它。

我使用 push 方法将产品添加到数组中。 this.selectedProducts.push(product);

我想将该特定数组传递给输入字段的值，以便可以将其与表单一起发送。像这样

<input type="hidden" :value="selectedProducts" name="selectedProducts[]">

但是发生了一些奇怪的事情，因为当我想访问我的 php 控制器中的数组时，我得到了这个响应

Array ( [0] => [object Object],[object Object] )

而is_array($request->array[0]) 返回错误

通常您应该能够访问对象及其值，但这些是字符串？当我想做$request->selectedProducts[0] 或$request->selectedProducts[0][0] 时我不能因为它是一个字符串？

 print_r($request->selectedProducts); // Returns Array ( [0] => [object Object],[object Object] )
 print(gettype($request->selectedProducts[0])); // Returns "["
 dd(is_array($request->selectedProducts[0])); // Returns false

这里发生了什么？为什么我无法在控制器中访问我的数据？

【问题讨论】：

在底层，所有输入信息都以字符串的形式传输。 html 输入的值不能是 JS 对象。因此，您的代码在这里所做的是尽可能存储它 - 它接收到的字符串表示形式。简单地命名输入 something[] 不允许您将数组存储到其中。您需要多个输入，您将从数组中分配单个值，或者 JSON 编码整个数组以用作单个元素的值，然后在 PHP 中对其进行解码。

【参考方案1】：

我认为你必须遍历所有产品并返回

<input type="hidden" :value="selectedProducts[index]" name="selectedProducts[]">

然后可能会在数组中添加一些标识符，例如

<input type="hidden" :value="selectedProducts[index]" name="selectedProducts[`$product.id`]">

【讨论】：

当我做 selectedProduct[index] 它返回 [object Object],[object Object] 作为一个字符串。不需要在名称中添加 ID 对吗？如果我没记错的话，它应该只是将数组作为数组传递给控制器​​。此外，每当我有 50 个条目时，我就有 50 个字段都具有不同的名称。