Приложение My Laravel Vue не удаляет запись. Нужно ли привязывать мою кнопку, чтобы она перенаправлялась на контроллер?

Question

Привет! В настоящее время я делаю приложение с простой операцией CRUD, и меня беспокоит, почему мой код не удаляет запись всякий раз, когда я нажимаю кнопку удаления. Я новичок в Laravel и Vue и в настоящее время знакомлюсь с функциями и рабочими процессами двух платформ. У меня есть таблица с именем posts, и она содержит id, title and body. Приложение добавит новое сообщение, а также отредактирует сообщение и удалит запись. Но на самом деле произошло то, что приложение не удаляет запись, и я не уверен, должна ли кнопка связываться, чтобы передать id контроллеру. Можете ли вы помочь мне, пожалуйста?

Вот моя страница Vue (IndexComponent.vue):

<template>
 <div>
  <h1>Posts</h1>
    <div class="row">
      <div class="col-md-10"></div>
      <div class="col-md-2">
        <router-link :to="{ name: 'create' }" class="btn btn-primary">Create Post</router-link>
      </div>
    </div><br />
        <table class="table table-hover">
            <thead>
            <tr>
                <th>ID</th>
                <th>Item Name</th>
                <th>Item Price</th>
                <th>Actions</th>
            </tr>
            </thead>
            <tbody>
                <tr v-for="post in posts" :key="post.id">
                    <td>{{ post.id }}</td>
                    <td>{{ post.title }}</td>
                    <td>{{ post.body }}</td>
                    <td><router-link :to="{name: 'edit', params: { id: post.id }}" class="btn btn-primary">Edit</router-link></td>
                    <td><button class="btn btn-danger">Delete</button></td>
                </tr>
            </tbody>
        </table>

<script>
import axios from 'axios';
export default {
    data(){
        return {
            posts: []
        }
    },
    created(){
        let uri = "/api/posts";
        axios.get(uri).then(response => {
            this.posts = response.data.data;
        });
    },
    methods: {
        deletePost(id) {
            let uri = `/api/post/delete/${id}`;
            axios.delete(uri).then(response => {
            this.posts.splice(this.posts.indexOf(id), 1);
            });
        }
    }
}

Это то, чтовнутри моего PostController.php:

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Resources\PostCollection;
use App\Post;

public function delete($id) {
    $post=Post::find($id);
    $post->delete();
    return response()->json('Successfully deleted!');
}

Это будет мой маршрут:

Route::delete('/post/delete/{id}', 'PostController@delete');

Внутри моего Post.php (модель):

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
   protected $fillable = ['title', 'body'];
}

Все естьна самом деле работает, кроме операции удаления, и я до сих пор беспокоюсь до сих пор. Я не работал какое-либо решение этой проблемы.

И ПУТЬ: Для пользовательского интерфейса. я использую bootstrap 4.3.1 и bootstrap-vue 2.0.4

Answer 1

            <tr v-for="post in posts" :key="post.id">
                <td>{{ post.id }}</td>
                <td>{{ post.title }}</td>
                <td>{{ post.body }}</td>
                <td><router-link :to="{name: 'edit', params: { id: post.id }}" class="btn btn-primary">Edit</router-link></td>
                <td><button @click="deletePost(post.id)" class="btn btn-danger">Delete</button></td>
            </tr>

Причина, по которой он не удаляется, потому что вы не запускаете функцию deletePost. Вы должны вызвать его в событии click, как показано выше.