Prop mutating by itself -Sanity check
Howdy everyone.
I need a sanity check. I'm passing a prop from PHP to Vuejs in jetstream + inertia. The prop represents a form fetched from DB and it contains a property called "fields" the fields are keyed by uuid strings. the prop name is "currentForm", If I remove the iteration from the code, the prop renders just fine. but with the iteration the current form is mutated, adding numeric keys for each of the string keys.
So instead of getting:
"9396bdd7-3d8d-48e7-8951-6e94cce23d83": Object { name: "Nome", slug: "nome", type: "text", … } "125405c5-b1a4-4fdb-bb7f-d7ba3e64e71d": Object { name: "Celular", slug: "celular", type: "text", … } "b03ad449-c795-40a0-b103-8f3c4d1675fa": Object { name: "Email", slug: "email", type: "email", … }
I end up with:
0: Object { id: "9396bdd7-3d8d-48e7-8951-6e94cce23d83", name: "Nome", slug: "nome", … } 1: Object { id: "125405c5-b1a4-4fdb-bb7f-d7ba3e64e71d", name: "Celular", slug: "celular", … } 2: Object { id: "b03ad449-c795-40a0-b103-8f3c4d1675fa", name: "Email", slug: "email", … } "9396bdd7-3d8d-48e7-8951-6e94cce23d83": Object { name: "Nome", slug: "nome", type: "text", … } "125405c5-b1a4-4fdb-bb7f-d7ba3e64e71d": Object { name: "Celular", slug: "celular", type: "text", … } "b03ad449-c795-40a0-b103-8f3c4d1675fa": Object { name: "Email", slug: "email", type: "email", … }
But how can the prop be mutate if there is no reload happening and the iteration code doesn't even mention the prop?
Going crazy here. Any help is welcome.
[code]
props:['systemFields', 'currentForm', 'currentFormFields'],
created(){
console.log(this.currentForm);
//iterate js object
for (const [key, value] of Object.entries(this.systemFields)) {
for (const [key2, value2] of Object.entries(this.systemFields[key].settings)) {
if (this.form.fields[key] == null) {
this.form.fields[key] = this.systemFields[key]
}
if(this.form.fields[key][key2] == null || this.form.fields[key][key2] == '') {
this.form.fields[key][key2] = this.systemFields[key].settings[key2]
}
}
}
},
data() {
return {
data:{},
errors:{},
show:{},
title:'Formulário: Novo',
form: this.$inertia.form({
id: this.currentForm.id,
name: this.currentForm ? this.currentForm.name : '',
fields: this.currentForm.fields,
})
}
},
[/code]
Please or to participate in this conversation.