mercredi 1 janvier 2020

Vue.js and laravel problem with delete method

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></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></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'];
}




Aucun commentaire:

Enregistrer un commentaire