Vue.js 和 laravel 的 delete 方法问题

Posted 2023-02-23

【中文标题】Vue.js 和 laravel 的 delete 方法问题

【英文标题】：Vue.js and laravel problem with delete method

【发布时间】：2020-04-20 12:57:42

【问题描述】：

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

<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'];

【问题讨论】：

所以你的浏览器控制台没有错误？如果你 dd($id);在控制器的顶部

@GertjanBrouwer 您在浏览器的控制台上得到什么响应？

你能确认它是否真的没有从数据库中删除吗？可能是前端的问题。

rcbgalido 是的，当我使用邮递员删除它时有效，所以我认为问题出在前面，但我不知道

我试过了，它可以工作：axios.delete('api/Etudiant/'+id).then(....) 但谁能告诉我：'api/Etudiant/ '+id 和 'api/Etudiant/$id' ?

【参考方案1】：

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

使用反引号` 而不是'。

Reference link