如何使用 vform 将对象数组传递给 laravel

Posted 2023-02-22

【中文标题】如何使用 vform 将对象数组传递给 laravel

【英文标题】：How to pass an array of objects using vform to laravel

【发布时间】：2021-08-15 10:34:23

【问题描述】：

我正在使用 vForm 将数据发布到 laravel 后端。表单数据包含我使用动态输入修改的对象数组。我不知道我将在表单中发送多少个对象，这就是我使用数组的原因 这是向数组添加一些对象后 vform 对象的样子

form : new vForm(
    field1 : '',
    field2 : '',
    array : [
      
         field1 : '' ,
         field2 : '' ,
         field3 : '' 
       ,
      
         field1 : '' ,
         field2 : '' ,
         field3 : '' 

       ,
      
         field1 : '' ,
         field2 : '' ,
         field3 : '' 

        
    ]
)

我的计划很简单，遍历对象并为它们创建模型。这里的问题是 laravel 以不同的方式接收数据，它将每个对象的每个项目都作为对象本身处理！我最终在数组中得到了 9 个对象而不是 3 个！

vuejs 发送的内容

   field1 : '',
    field2 : '',
    array : [
      
         field1 : '' ,
         field2 : '' ,
         field3 : '' 
       ,
      
         field1 : '' ,
         field2 : '' ,         
         field3 : '' 

       ,
      
         field1 : '' ,
         field2 : '' ,
         field3 : '' 

        
    ]

laravel 收到的内容（返回 $request）

   field1 : '',
    field2 : '',
    array : [
       field1 : '' ,
       field2 : '' ,
       field3 : '' ,
       field1 : '' ,
       field2 : '' ,
       field3 : '' ,
       field1 : '' ,
       field2 : '' ,
       field3 : '' 
     ]

我尝试解决它

我搜索了解决方案，我发现您可以在发送表单数据之前修改表单数据，然后使用 vform 中的传输数据，但它对我不起作用，所以我最终做的是将数组作为 json 字符串传递并解码它在后端，我用过

this.form.array = JSON.stringify(this.form.array) ;

$array = json_decode($request->array);

但是我必须在发布请求之后对其进行解析，这样它就不会弄乱我的动态输入，因为我使用 vfor 循环遍历数组并且 stringify 会将其更改为字符串，并且我将有很多字段由循环..

我错过了什么吗？这是解决问题的好方法吗？还有其他方法可以使用 vform 吗？

【问题讨论】：

尝试使用this.someOtherDataVariable = JSON.stringify(this.form.array) ; 而不是this.form.array = JSON.stringify(this.form.array) ; 并将this.someOtherDataVariable 发送到formadata 和服务器这将使您的v-for 循环继续工作

是的，它会工作，我试过了！但这将使我失去我的 vform 功能，我将无法获得错误或自动更新 vform .. 我想用我的 vform 原样发送它，并且循环运行良好，因为我正在重置它而无需等待请求。

如果您使用单独的变量来存储它，为什么它会影响您的 vform？它不应该发生..好奇

我是否能够检测错误并将它们链接到每个对象？另外，我正在传递所有的 vform，其中我有数组。 如果我使用 this.form.post 我应该如何在 vform 中传递新变量？你的意思是我单独通过了吗？

我已经添加了答案，你应该从你的表单数据中进行深拷贝

【参考方案1】：

将表单的深拷贝与实际表单分开，然后使用 stringify 和 formata 并使用深拷贝表单发布请求。

data: function () 
    return 
      formTemp: new vForm(),
      form: new vForm(
        field1: "",
        field2: "",
        array: [
          
            field1: "",
            field2: "",
            field3: "",
          ,
          
            field1: "",
            field2: "",
            field3: "",
          ,
          
            field1: "",
            field2: "",
            field3: "",
          ,
        ],
      ),
    ;

let keys = Object.keys(this.form);
let keysT = Object.keys(this.formTemp);
    
let objectKeys = keys.filter((n) => !keysT.includes(n));
    
for (var j = 0; j < objectKeys.length; j++) 
      this.formTemp[objectKeys[j]] = this.form1[objectKeys[j]];

    
this.formTemp.array = JSON.stringify(this.formTemp.array);

在您的表单数据中使用 this.formTemp 并发送发布请求

【讨论】：

谢谢你的回答，但你没有明白我不想复制任何东西，我已经做了它并且它使用一个 vform 对象，而且我看不出你的提议和你的提议有什么区别我说我试过了，我试过复制，我没有反馈也没有验证 ofc，因为我不想更改我在模板中使用的 vform。我要求一种比我使用的更简单的方法。如果有任何问题

你试过浅拷贝还是深拷贝？因为浅拷贝会影响你的vform而不是深拷贝。

我确实搜索过深拷贝，但它不会修复任何东西，因为它是一个副本，浅层似乎做了一些引用，但我仍然不想要任何副本，我所做的解决方案更轻，如果我这样做内存引用它会影响循环，因为我正在同时更改它们

哈哈哈这是你的电话，在你的空闲时间试试这个深拷贝。 ;)

感谢大佬的努力，我会详细检查这些方法，我会看到，我已经推入 main 稳定 xd 我只是怀疑这是否是最简单的方法..但我会检查你的