CRUD implementation using inertia, vue3 and laravel 10

Hello,

Recently, I've been working with inertia, Vue.js, and Laravel to implement CRUD operations, but I'm encountering a few issues.

In my CRUD implementation, I'm using a modal approach where a popup window opens to create a new record. After submitting the form, I'm currently using the following code to redirect back to the index screen:

return redirect()->route('users.index');

This code successfully redirects me back to the index screen with the updated records. However, I would like to receive only the newly created record so that I can manually add it to the users list myself.

I'm aware that I can use Axios to send a request and retrieve the data in JSON format. However, I'm utilizing the Inertia useForm hook to benefit from basic form validations.

Same thing applies to update and destroy methods. I'm using listing screen, so there are no urls change while doing crud operations.

Could you please assist me with finding a solution that allows me to receive only the newly created record while still utilizing the Inertia useForm hook for form validations?

LaryAI

3 years ago

Level 58

To receive only the newly created record after submitting a form using Inertia useForm hook, you can modify your Laravel controller method to return the newly created record as a JSON response. Here's an example:

public function store(Request $request)
{
    // validate the form data
    $validatedData = $request->validate([
        'name' => 'required',
        'email' => 'required|email|unique:users,email',
        'password' => 'required|min:6',
    ]);

    // create a new user record
    $user = User::create($validatedData);

    // return the newly created record as a JSON response
    return response()->json([
        'user' => $user,
    ]);
}

Then, in your Vue component, you can handle the response and add the newly created record to your users list. Here's an example:

import { useForm } from '@inertiajs/inertia-vue3';

export default {
  setup() {
    const { data, post, processing } = useForm({
      name: '',
      email: '',
      password: '',
    });

    const users = ref([]);

    const handleSubmit = async () => {
      const { data: { user } } = await post('/users', data);

      // add the newly created user to the users list
      users.value.push(user);

      // reset the form data
      data.name = '';
      data.email = '';
      data.password = '';
    };

    return {
      data,
      processing,
      handleSubmit,
      users,
    };
  },
};

Similarly, you can modify your update and destroy methods to return the updated or deleted record as a JSON response, and handle the response in your Vue component to update or remove the record from your users list.

Please or to participate in this conversation.