删除方法的Vue.js和laravel问题

Question

嗨，我是网站开发的新手，我的项目（laravel、vue.js、mysql）有问题，我创建了删除 api，当我使用 postman 时它运行良好，但在使用 axios.delete 时在 Vue 文件中不行 ？ 顺便说一句（post，get）运行良好。 对不起这个英语。

<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>

路线\\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');

    }

    ...
}

学生模型：

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Etudiant extends Model
{
    protected $fillable = ['matricule', 'nom', 'prenom', 'email', 'annee'];
}

Answer 1

axios.delete(`api/Etudiant/${id}`).then(....)

使用反引号` not ' 。

参考链接