useForm Inertiajs: how to update data

hi developers, how i can update data in my laravel-inertiajs-vuejs app,

i want to add the props value to my inputs,

<script>
import Layout from "../../Layouts/Dashboard.vue"

export default {
    layout: Layout,
    props: {
        settings: Array,
    }
}
</script>

<script setup>
    import {useForm} from "@inertiajs/inertia-vue3"

    let form = useForm({
        name: null,
        title: null,
        description: null,
    });

    let submit = () => {
        form.post('/admin/settings/edit');
    }
</script>

Sinnbeck

3 years ago

Level 102

You just bind them to the inputs as shown in the example here: https://inertiajs.com/forms#form-helper

    <input type="text" v-model="form.name">
    <div v-if="form.errors.name">{{ form.errors.name }}</div>

oncebar

3 years ago

Level 1

@Sinnbeck yes i do, but i'am getting data from database how i can show it in my input

<form @submit.prevent="submit">
            <div class="settings__form">

                <div class="settings__form__group new__group">
                    <span>الإسم</span>
                    <input v-model="form.name" type="text" />
                </div>

                <div class="settings__form__group new__group">
                    <span>العنوان</span>
                    <input v-model="form.title" type="text" />
                </div>

                <div class="settings__form__group new__group">
                    <span>الوصف</span>
                    <textarea v-model="form.description"></textarea>
                </div>

                <div class="settings__form__group">
                    <button type="submit">save</button>
                </div>

            </div>
        </form>

Sinnbeck

3 years ago

Level 102

@oncebar You should be getting into the page via props

I dont recall if its just name or props.name or this.name in vue (I am a react user). But just pass them into the form

    let form = useForm({
        name: this.name,
        title: this.title,
        description: this.title,
    });

Nihir

3 years ago

Best Answer

Level 50

My project uses Vue JS with inertia I am not so familiar with inertia, but I used it in the project I have a rough idea of inertia

Here is the code which I used in my project to update the role:

const props = defineProps({
  role: Object,
});

const form = useForm({
  name: props.role?.name,
  image: null,
});

const submit = () => {
  Inertia.post(`/role/${props.role.id}`, {
    _method: "put",
    name: form.name,
  });
};

1 like

Please or to participate in this conversation.