How to pass an array of objects using vform to laravel

Question

I am using vForm to post data to a laravel backend . the form data contain an array of objects that i modify using a dynamic input . i dont know exactly how many object i will send within the form thats why i used an array this is how vform object it looks like after adding some objects to the array

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

       },
      {
         field1 : '' ,
         field2 : '' ,
         field3 : '' 

       } 
    ]
})

my plan is simple , loop through the objects and create Models for them . the problem here is that laravel receives the data in different way , it handled each item of each object as an object itself ! and i ended up with 9 objects inside of array instead of 3 !

what vuejs sends

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

       },
      {
         field1 : '' ,
         field2 : '' ,
         field3 : '' 

       } 
    ]
}

what laravel receives (return $request)

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

my attempt to solve it

i searched for solution and i found out that you can modify the form data before sending it using transfer data inside vform , but it did not work for me so what i ended up doing was passing the array as a json string and decode it in the backend , i used

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

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

but i have to parse it after the post request so it wont mess up my dynamic inputs , since i am using vfor to loop through the array and stringify will change it to a string and i ll have a lot of fields caused by the loop ..

am i missing somthing ? is this a good way to solve it ? is there any other way to do it using vform ?

Try to use this.someOtherDataVariable = JSON.stringify(this.form.array) ; instead of this.form.array = JSON.stringify(this.form.array) ; and send this.someOtherDataVariable to formadata and server This will keep your v-for loop working on — Shamsail
– Shamsail, Commented May 27, 2021 at 7:34
yeah it will work , i tried it ofc ! but that will make me lose my vform functionalities , i wont be able to get the erros or update the vform automatically .. i want to send it with my vform as it is , and the loop works well since i am resetting it without waiting for the request . — HijenHEK
– HijenHEK, Commented May 27, 2021 at 7:52
Why is it effecting your vform if you are using a seperate variable to store it? It should not be happened .. curious — Shamsail
– Shamsail, Commented May 27, 2021 at 8:00
am i goin to be able to detect errors and link them to each object ? plus i am passing all of the vform and in it i have the array . <br> if i am using this.form.post how i am i supposed to pass the new variable within the vform ? do you mean i passe it seperatly ? — HijenHEK
– HijenHEK, Commented May 27, 2021 at 8:10
I have added the answer , you should make deep copy out of your form data — Shamsail
– Shamsail, Commented May 27, 2021 at 11:15

Shamsail · Accepted Answer · 2021-05-27 11:14:40Z

1

Make a deep copy of your form separate from the actual form and then use stringify and formata and post request with deep copy form.

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);

Use this.formTemp in your formdata and send post request

answered May 27, 2021 at 11:14

Shamsail

6529 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

HijenHEK Over a year ago

thank you for your answer , but you didnt get that i dont want to duplicate anything , i already did it and its working with one vform object , plus i dont see any difference between what you are proposing and what i said i tried , i tried duplicating and i had no feed back nor validation ofc since i dont want to change the vform i used in my template . i am asking for a simpler method than the one i used . and if there is any problem with it

Shamsail Over a year ago

did you tried with shallow copy or deep copy ?, because shallow copy will effect your vform not the deep copy one.

HijenHEK Over a year ago

i did search for deep copy and it wont fix anything since its a copy , shallow seems to do some refrencing , but Still i dont want any copies , the solution i did is lighter , and if i do memory refrencing it will affect the loop since i am changing them both

Shamsail Over a year ago

hahaha it's your call, try this deep copy in your free time. ;)

HijenHEK Over a year ago

thanks man a thumbs up for the effort , i will check those methods in details and i ll see ,, i already pushed in main as stable xd i just was doubting if that was the easiest way .. but i ll check yours

Collectives™ on Stack Overflow

How to pass an array of objects using vform to laravel

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related