Cara Menampilkan Validasi Error Laravel di Vue.js + Axios

Untuk dapat menampilkan keterangan error pada aplikasi vue kita atas validasi yang dibuat, kita hanya perlu mengambil respon kesalahan tersebut pada metode yang menangani permintaan kita.

Sebagai contoh, berikut validasi yang dibuat pada metode untuk menyimpan data baru di laravel dan respon kesalahan validasi yang akan ditampilkan di aplikasi vue.

//controller
public function store(Request $request)
{
     $validated = $request->validate([
         'name' => 'required|unique:customers|max:100',
         'email' => 'required|email',
         'address' => 'required|max:100',
     ]);  

     $customer = Customer::create($request->all());

     return response()->json($customer, 200);
}

//postman
{
  "message": "The given data was invalid.",
  "errors": {
     "name": [
        "The name has already been taken."
     ],
     "email": [
        "The email must be a valid email address."
     ],
     "address": [
        "The address field is required."
     ]
  }
}

Sekarang pada komponen vue kita buat permintaan POST dengan axios ke API untuk mengirim data formulir.

Silahkan install axios jika belum menginstallnya.

#npm
npm install axios --save

#yarn
yarn add axios

Pada permintaan dengan axios kita buat seperti dibawah ini.

<script>
import axios from 'axios'
 
export default {  
  data() {
    return {
      ...
    }
  }, 
  methods: {
    addCustomer() {
      axios.post('http://localhost:8000/api/customers', this.customer)
        .then(response => {
            console.log(response);
        })
        .catch(error => {   
          console.error(error.response.data); 
        })
    }  
  }
}
</script>

Kita lihat method di atas. Kita gunakan metode .catch untuk menangani kesalahan atau error yang terjadi atas permintaan yang dikirim, dan kita dapat melihat atau mengambil data error tersebut.

Diatas kita coba ambil respon error yang ada dan menampilkannya pada console browser; hasilnya seperti gambar di bawah ini.

Kita lanjutkan untuk mengirim respon error tersebut ke data properti lalu merendernya menggukanan direktif v-for seperti di bawah ini.

<template>
  <div id="app">

    <div v-if="errors" class="error-messages">
      <div v-for="(error, index) in errors" :key="index">
        <ul>
          <li>{{ error[0] }}</li>
        </ul>
      </div>
    </div>

    <form @submit.prevent="submit">
      <div class="form-group">
        <label for="name">Nama</label>
        <input type="text" v-model="customer.name" class="form-control" placeholder="Masukan nama pelanggan">
      </div>
      <div class="form-group">
        <label for="email">Email</label>
        <input type="text" v-model="customer.email" class="form-control" placeholder="Masukan email pelanggan">
      </div>
      <div class="form-group">
        <label for="address">Alamat</label>
        <textarea type="text" v-model="customer.address" class="form-control" 
          placeholder="Masukan alamat pelanggan"> </textarea>
      </div>
      <button type="submit" class="btn btn-primary mr-2">Submit</button>
      <button class="btn btn-danger" type="button" data-toggle="collapse" data-target="#collapseExample">
      Cancel
      </button>
    </form>
  </div>
</template>
<script>
  import axios from 'axios'
   
  export default {  
    data() {
      return {
        customer: {
          name: '',
          email: '',
          address: '',
        },
        errors: null
      }
    }, 
    methods: {
      addCustomer() {
        axios.post('http://localhost:8000/api/customers', this.customer)
          .then(response => {
              console.log(response);
          })
          .catch(error => { 
            console.log(error.response.data.errors); 
            this.errors = error.response.data.errors;
          })
        }  
    }
  }
</script>

<style scoped>
  #app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: left;
  color: #2c3e50;
  margin-top: 60px;
  padding:0 4rem;
  } 
  .error-messages { 
  background: #ffd1ce;
  padding: 1rem 0;
  margin-bottom: 1rem;
  border-radius: 4px;
  }
  .error-messages ul{ 
  margin: 0;
  }
</style>

Kita menampilkan berdasarkan index pertama (0) dari array error[0] yang ada di dalam properti objects karena hanya memilki value tunggal.

<div v-if="errors" class="error-messages">
  <div v-for="(error, index) in errors" :key="index">
    <ul>
       <li>{{ error[0] }}</li>
    </ul>
  </div>
</div>

Hasilnya seperti gambar dibawah ini.

Demikian cara menampilkan validasi laravel di aplikasi vue dengan axios. Silahkan dicoba.