Tutorial Vue 3 dan Laravel 10 #6 : Edit dan Update Data Dengan Rest API di Vue 3

Vue 3 adalah salah satu framework JavaScript yang populer untuk membangun antarmuka pengguna yang interaktif dan dinamis. Laravel 10, di sisi lain, adalah salah satu framework backend yang populer untuk membangun aplikasi web dan layanan API. Dalam tutorial ini, kita akan belajar cara mengedit dan memperbarui data dengan menggunakan Rest API di Vue 3 dan Laravel 10.

Langkah 1: Membuat API Endpoint di Laravel 10

Pertama-tama, kita perlu membuat endpoint API di Laravel 10 untuk mengakses dan memperbarui data. Kita bisa membuat endpoint ini dengan menggunakan route dan controller di Laravel 10.

“`php
// routes/web.php
Route::get(‘/data/{id}’, ‘DataController@show’);
Route::put(‘/data/{id}’, ‘DataController@update’);
“`

“`php
// app/Http/Controllers/DataController.php
public function show($id)
{
$data = Data::find($id);
return response()->json($data);
}

public function update(Request $request, $id)
{
$data = Data::find($id);
$data->update($request->all());
return response()->json([‘message’ => ‘Data updated successfully’]);
}
“`

Langkah 2: Menggunakan Axios di Vue 3

Setelah membuat endpoint API di Laravel 10, kita bisa menggunakan library Axios di Vue 3 untuk melakukan request ke endpoint tersebut.

“`javascript
// main.js
import { createApp } from ‘vue’
import App from ‘./App.vue’
import axios from ‘axios’

const app = createApp(App)
app.config.globalProperties.axios = axios
app.mount(‘#app’)
“`

“`javascript
// DataEdit.vue
export default {
data() {
return {
id: null,
name: ”,
description: ”
}
},
created() {
this.id = this.$route.params.id
this.getData()
},
methods: {
getData() {
this.axios.get(`/data/${this.id}`)
.then(response => {
this.name = response.data.name
this.description = response.data.description
})
},
updateData() {
this.axios.put(`/data/${this.id}`, {
name: this.name,
description: this.description
})
.then(response => {
console.log(response.data.message)
})
}
}
}
“`

Langkah 3: Membuat Form Edit di Vue 3

Terakhir, kita perlu membuat form untuk mengedit data di Vue 3. Form ini akan terhubung dengan data yang telah diambil dari endpoint API dan akan mengirim data yang baru ke endpoint tersebut saat tombol “Update” ditekan.

“`html

“`

Dengan mengikuti langkah-langkah di atas, kita bisa membuat fitur edit dan update data menggunakan Rest API di Vue 3 dan Laravel 10. Semoga tutorial ini bermanfaat!