Hi im new in website develpoment and i have a problem in my project(laravel, vue.js, mysql), i created the delete api and it works well when i used postman but in the Vue file when use the axios.delete it did not work ? btw (post,get) work well. sorry for this english.
<template>
<div class="table">
<table>
<tr>
<th>Id</th>
<th>Matricule</th>
<th>Nom</th>
<th>Prenom</th>
<th>Email</th>
<th>Annee</th>
<th>Action</th>
</tr>
<tr v-for="etud in EtudTable" :key="etud.id">
<td>{{etud.id}}</td>
<td>{{etud.matricule}}</td>
<td>{{etud.nom}}</td>
<td>{{etud.prenom}}</td>
<td>{{etud.email}}</td>
<td>{{etud.annee}}</td>
<td><button @click.prevent="Delete(etud.id)">Supprimé</button></td>
</tr>
</table>
</div>
</template>
<script>
export default {
data(){
return {
EtudTable : []
}
} ,
created:{
},
methods:{
Delete(id) {
axios.delete('api/Etudiant/${id}').then(function (response){
let index = this.EtudTable.findIndex(etud => etud.id === id);
this.EtudTable.splice(index, 1);
});
},
getVueItems: function getVueItems() {
var _this = this;
axios.get('api/Etudiant').then(function (response) {
_this.EtudTable = response.data;
});
},
....
}
}
</script>
Route\api:
Route::delete('Etudiant/{id}', 'EtudiantController@Delete')->name('etudiant.delete');
EtudiantController.php:
<?php
namespace App\Http\Controllers;
use App\Etudiant;
use Illuminate\Http\Request;
class EtudiantController extends Controller
{
...
public function Delete($id){
$etudiant = Etudiant::find($id);
$etudiant->delete();
return response()->json('successfully deleted');
}
...
}
Etudiant model:
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Etudiant extends Model
{
protected $fillable = ['matricule', 'nom', 'prenom', 'email', 'annee'];
}
