Use form helper from inertia-vue 0.5.0

https://inertiajs.com/forms#form-helper

See inertiajs/pingcrm#99

app/javascript/Pages/Auth/Login.vue

@@ -7,7 +7,7 @@
       />
       <form
         class="mt-8 bg-white rounded-lg shadow-xl overflow-hidden"
-        @submit.prevent="submit"
+        @submit.prevent="form.post($routes.user_session())"
       >
         <div class="px-10 py-12">
           <flash-messages />
@@ -17,15 +17,15 @@
           </h1>
           <div class="mx-auto mt-6 w-24 border-b-2" />
           <text-input
-            v-model="form.email"
+            v-model="form.user.email"
             class="mt-10"
             label="Email"
             type="email"
             autofocus
             autocapitalize="off"
           />
           <text-input
-            v-model="form.password"
+            v-model="form.user.password"
             class="mt-6"
             label="Password"
             type="password"
@@ -36,7 +36,7 @@
           >
             <input
               id="remember"
-              v-model="form.remember_me"
+              v-model="form.user.remember_me"
               class="mr-1"
               type="checkbox"
             >
@@ -50,7 +50,7 @@
             href="#reset-password"
           >Forget password?</a>
           <loading-button
-            :loading="sending"
+            :loading="form.processing"
             class="btn-indigo"
             type="submit"
           >
@@ -80,24 +80,14 @@ export default {
   layout: Layout,
   data() {
     return {
-      sending: false,
-      form: {
-        email: '[email protected]',
-        password: 'secret',
-        remember_me: null,
-      },
+      form: this.$inertia.form({
+        user: {
+          email: '[email protected]',
+          password: 'secret',
+          remember_me: null,
+        },
+      }),
     }
   },
-  methods: {
-    submit() {
-      this.$inertia
-        .post(this.$routes.user_session(), {
-          user: this.form,
-        }, {
-          onStart: () => this.sending = true,
-          onFinish: () => this.sending = false,
-        })
-    },
-  },
 }
 </script>

app/javascript/Pages/Contacts/Edit.vue

@@ -21,7 +21,7 @@
       <contact-form
         v-model="form"
         :organizations="organizations"
-        @submit="submit"
+        @submit="form.put($routes.contact(contact.id))"
       >
         <div class="px-8 py-4 bg-gray-100 border-t border-gray-200 flex items-center">
           <button
@@ -34,7 +34,7 @@
             Delete Contact
           </button>
           <loading-button
-            :loading="sending"
+            :loading="form.processing"
             class="btn-indigo ml-auto"
             type="submit"
           >
@@ -78,18 +78,12 @@ export default {
   remember: 'form',
   data() {
     return {
-      sending: false,
-      form: _.omit(this.contact, 'id', 'deleted_at'),
+      form: this.$inertia.form({
+        contact: _.omit(this.contact, 'id', 'deleted_at'),
+      }),
     }
   },
   methods: {
-    submit() {
-      this.$inertia
-        .put(this.$routes.contact(this.contact.id), this.form, {
-          onStart: () => this.sending = true,
-          onFinish: () => this.sending = false,
-        })
-    },
     destroy() {
       if (confirm('Are you sure you want to delete this contact?')) {
         this.$inertia.delete(this.$routes.contact(this.contact.id))

app/javascript/Pages/Contacts/Form.vue

@@ -2,20 +2,20 @@
   <form @submit.prevent="$emit('submit')">
     <div class="p-8 -mr-6 -mb-8 flex flex-wrap">
       <text-input
-        v-model="form.first_name"
-        :errors="errors.first_name"
+        v-model="form.contact.first_name"
+        :errors="form.errors.first_name"
         class="pr-6 pb-8 w-full lg:w-1/2"
         label="First name"
       />
       <text-input
-        v-model="form.last_name"
-        :errors="errors.last_name"
+        v-model="form.contact.last_name"
+        :errors="form.errors.last_name"
         class="pr-6 pb-8 w-full lg:w-1/2"
         label="Last name"
       />
       <select-input
-        v-model="form.organization_id"
-        :errors="errors.organization_id"
+        v-model="form.contact.organization_id"
+        :errors="form.errors.organization_id"
         class="pr-6 pb-8 w-full lg:w-1/2"
         label="Organization"
       >
@@ -29,38 +29,38 @@
         </option>
       </select-input>
       <text-input
-        v-model="form.email"
-        :errors="errors.email"
+        v-model="form.contact.email"
+        :errors="form.errors.email"
         class="pr-6 pb-8 w-full lg:w-1/2"
         label="Email"
       />
       <text-input
-        v-model="form.phone"
-        :errors="errors.phone"
+        v-model="form.contact.phone"
+        :errors="form.errors.phone"
         class="pr-6 pb-8 w-full lg:w-1/2"
         label="Phone"
       />
       <text-input
-        v-model="form.address"
-        :errors="errors.address"
+        v-model="form.contact.address"
+        :errors="form.errors.address"
         class="pr-6 pb-8 w-full lg:w-1/2"
         label="Address"
       />
       <text-input
-        v-model="form.city"
-        :errors="errors.city"
+        v-model="form.contact.city"
+        :errors="form.errors.city"
         class="pr-6 pb-8 w-full lg:w-1/2"
         label="City"
       />
       <text-input
-        v-model="form.region"
-        :errors="errors.region"
+        v-model="form.contact.region"
+        :errors="form.errors.region"
         class="pr-6 pb-8 w-full lg:w-1/2"
         label="Province/State"
       />
       <select-input
-        v-model="form.country"
-        :errors="errors.country"
+        v-model="form.contact.country"
+        :errors="form.errors.country"
         class="pr-6 pb-8 w-full lg:w-1/2"
         label="Country"
       >
@@ -73,8 +73,8 @@
         </option>
       </select-input>
       <text-input
-        v-model="form.postal_code"
-        :errors="errors.postal_code"
+        v-model="form.contact.postal_code"
+        :errors="form.errors.postal_code"
         class="pr-6 pb-8 w-full lg:w-1/2"
         label="Postal code"
       />
@@ -104,9 +104,6 @@ export default {
     },
   },
   computed: {
-    errors() {
-      return this.$page.props.errors || {}
-    },
     form: {
       get() {
         return this.value

app/javascript/Pages/Contacts/New.vue

@@ -13,11 +13,11 @@
       <contact-form
         v-model="form"
         :organizations="organizations"
-        @submit="submit"
+        @submit="form.post($routes.contacts())"
       >
         <div class="px-8 py-4 bg-gray-100 border-t border-gray-200 flex justify-end items-center">
           <loading-button
-            :loading="sending"
+            :loading="form.processing"
             class="btn-indigo"
             type="submit"
           >
@@ -50,18 +50,10 @@ export default {
   remember: 'form',
   data() {
     return {
-      sending: false,
-      form: {},
+      form: this.$inertia.form({
+        contact: {},
+      }),
     }
   },
-  methods: {
-    submit() {
-      this.$inertia
-        .post(this.$routes.contacts(), this.form, {
-          onStart: () => this.sending = true,
-          onFinish: () => this.sending = false,
-        })
-    },
-  },
 }
 </script>

app/javascript/Pages/Organizations/Edit.vue

@@ -20,7 +20,7 @@
     <div class="bg-white rounded shadow overflow-hidden max-w-3xl">
       <organization-form
         v-model="form"
-        @submit="submit"
+        @submit="form.put($routes.organization(organization.id))"
       >
         <div class="px-8 py-4 bg-gray-100 border-t border-gray-200 flex items-center">
           <button
@@ -33,7 +33,7 @@
             Delete Organization
           </button>
           <loading-button
-            :loading="sending"
+            :loading="form.processing"
             class="btn-indigo ml-auto"
             type="submit"
           >
@@ -155,18 +155,12 @@ export default {
   remember: 'form',
   data() {
     return {
-      sending: false,
-      form: _.omit(this.organization, 'id', 'deleted_at'),
+      form: this.$inertia.form({
+        organization: _.omit(this.organization, 'id', 'deleted_at'),
+      }),
     }
   },
   methods: {
-    submit() {
-      this.$inertia
-        .put(this.$routes.organization(this.organization.id), this.form, {
-          onStart: () => this.sending = true,
-          onFinish: () => this.sending = false,
-        })
-    },
     destroy() {
       if (confirm('Are you sure you want to delete this organization?')) {
         this.$inertia.delete(this.$routes.organization(this.organization.id))

app/javascript/Pages/Organizations/Form.vue

@@ -2,44 +2,44 @@
   <form @submit.prevent="$emit('submit')">
     <div class="p-8 -mr-6 -mb-8 flex flex-wrap">
       <text-input
-        v-model="form.name"
-        :errors="errors.name"
+        v-model="form.organization.name"
+        :errors="form.errors.name"
         class="pr-6 pb-8 w-full lg:w-1/2"
         label="Name"
       />
       <text-input
-        v-model="form.email"
-        :errors="errors.email"
+        v-model="form.organization.email"
+        :errors="form.errors.email"
         class="pr-6 pb-8 w-full lg:w-1/2"
         label="Email"
       />
       <text-input
-        v-model="form.phone"
-        :errors="errors.phone"
+        v-model="form.organization.phone"
+        :errors="form.errors.phone"
         class="pr-6 pb-8 w-full lg:w-1/2"
         label="Phone"
       />
       <text-input
-        v-model="form.address"
-        :errors="errors.address"
+        v-model="form.organization.address"
+        :errors="form.errors.address"
         class="pr-6 pb-8 w-full lg:w-1/2"
         label="Address"
       />
       <text-input
-        v-model="form.city"
-        :errors="errors.city"
+        v-model="form.organization.city"
+        :errors="form.errors.city"
         class="pr-6 pb-8 w-full lg:w-1/2"
         label="City"
       />
       <text-input
-        v-model="form.region"
-        :errors="errors.region"
+        v-model="form.organization.region"
+        :errors="form.errors.region"
         class="pr-6 pb-8 w-full lg:w-1/2"
         label="Province/State"
       />
       <select-input
-        v-model="form.country"
-        :errors="errors.country"
+        v-model="form.organization.country"
+        :errors="form.errors.country"
         class="pr-6 pb-8 w-full lg:w-1/2"
         label="Country"
       >
@@ -52,8 +52,8 @@
         </option>
       </select-input>
       <text-input
-        v-model="form.postal_code"
-        :errors="errors.postal_code"
+        v-model="form.organization.postal_code"
+        :errors="form.errors.postal_code"
         class="pr-6 pb-8 w-full lg:w-1/2"
         label="Postal code"
       />
@@ -78,9 +78,6 @@ export default {
     },
   },
   computed: {
-    errors() {
-      return this.$page.props.errors || {}
-    },
     form: {
       get() {
         return this.value