Update with FormData using Vue 3 and Laravel 9
2 years ago
admin
Vuejs
When you are working with Laravel and Vue js and you try to update data using the FormData interface you get an empty response, so let's see how to fix this error.
Solve Laravel 9 Vuejs 3 put request FormData return no data
So to fix this error all you need to do is to append the _method field with put as value to the FormData.
<template>
<div class="row my-3">
<div class="col-md-8 mx-auto my-5">
<form @submit.prevent="addArticle">
<div class="form-group mb-2">
<input
type="text"
v-model="data.title"
placeholder="Title"
class="form-control"
:required="true">
</div>
<div class="form-group mb-2">
<input
type="file"
name="photo"
@change="getImage"
:required="true">
</div>
<div class="form-group mb-2">
<textarea
rows="5" cols="30"
v-model="data.body"
placeholder="Body"
class="form-control"
:required="true"
></textarea>
</div>
<div class="form-group mb-2">
<button type="submit" class="btn btn-primary">
Submit
</button>
</div>
</form>
</div>
</div>
</template>
<script setup>
import { reactive } from 'vue';
const data = reactive({
title: '',
body: '',
image: null,
});
const getImage = (event) => {
data.image = event.target.files[0];
};
const addArticle = () => {
try {
const formData = new FormData();
formData.append('image', data.image);
formData.append('title', data.title);
formData.append('body', data.body);
formData.append('_method', 'put');
await axios.post(`/api/articles`, formData);
console.log('Article updated')
} catch (error) {
console.log(error);
}
}
</script>
<style>
</style>