Level 63
Have you checked the content of you item variable ?
What do you see when you log this variable in the console ?
Oct 29, 2022
3
Level 9
Replace reactive form in edit method vue3
I'm trying to create a crud all on the same page using dialogs/modals for creating and editing an item. I'm using inertia's form helper useForm https://inertiajs.com/forms#form-helper.
This is my code so far but the form never gets replaced with the values I want.
<script setup>
import {Head, useForm} from '@inertiajs/inertia-vue3';
import {Inertia} from '@inertiajs/inertia';
import {reactive, watch, ref, computed} from "vue";
//data
let form = useForm({
username: null,
email: null,
password: null,
password_confirmation: null,
date_of_birth: null,
role_id: null
})
//methods
const create = () => {
show_form.value = true;
}
const edit = (item) => {
console.log(item);
form = useForm(item);
// form.value= useForm(item);
// form.id = item.id;
// form.username = item.username;
// form.email = item.email;
// form.date_of_birth = item.date_of_birth;
// form.role_id = item.role.id;
show_form.value = true;
console.log(form);
}
I tried those ways in the edit method but there isn't any changes, what am I doing wrong?
Level 9
@vincent15000 I get this
Proxy {id: 1, username: 'sadmin', email: '[email protected]', date_of_birth: '1995-12-30', role: {…}}
[[Handler]]:Object
deleteProperty:ƒ deleteProperty(target, key)
get:ƒ (target, key, receiver)
has:ƒ has(target, key)
ownKeys:ƒ ownKeys(target)
set:ƒ (target, key, value, receiver)
[[Prototype]]:Object
[[Target]]:Object
date_of_birth:"1995-12-30"
email: "[email protected]"
id:1
role: {id: 1, name: 'SuperAdmin'}
username: "sadmin"
[[Prototype]]:Object
[[IsRevoked]]:false
1 like
Level 63
@msslgomez Ok and when you log this in the console ?
console.log(item.username);
This should work.
form.id = item.id;
form.username = item.username;
form.email = item.email;
form.date_of_birth = item.date_of_birth;
form.role_id = item.role.id;
Please or to participate in this conversation.