Vue JS CRUD – Edit & Update data using API

In this article, we will learn how to edit and update data using API in Vue JS. We will use Laravel API to handle the back end and Vue 3 for the front end.

Editing Data in Vue JS

First, let’s create a form in Vue JS to edit the data. We can use the v-model directive to bind the input fields to the data properties in Vue. We will also need to fetch the data from the API and populate the form with the current values.

    
      <template>
        <form @submit="updateData">
          <input type="text" v-model="formData.name">
          <input type="text" v-model="formData.email">
          <button type="submit">Update</button>
        </form>
      </template>

      <script>
      export default {
        data() {
          return {
            formData: {
              name: '',
              email: ''
            }
          }
        },
        mounted() {
          this.fetchData()
        },
        methods: {
          fetchData() {
            // Fetch data from API and populate form
          },
          updateData() {
            // Send updated data to API
          }
        }
      }
      </script>
    
  

Updating Data using Laravel API

Next, let’s create an API endpoint in Laravel to handle the update request. We can use the route::put method to define the route for updating the data. Inside the controller, we can use the request() method to retrieve the data from the request and update the database.

    
      Route::put('/data/{id}', [DataController::class, 'update']);

      public function update(Request $request, $id) {
        $data = Data::findOrFail($id);
        $data->update($request->all());

        return response()->json(['message' => 'Data updated successfully']);
      }
    
  

Conclusion

In this article, we have learned how to edit and update data using API in Vue JS and Laravel. By following these steps, you can create a seamless CRUD functionality in your web application using Vue 3 and Laravel API.