mysql - 使用 vue.js 从数据库中删除产品

Question

当我点击 Vue.js 表中的按钮时，如何从 MySql 数据库中删除产品？

我只是写了它，以便它只在 View 中删除。数据库与 Laravel 关联。

<div class="container" id="main">
    <h1>@{{title}}</h1>
    <h3>Products (@{{products.length}})</h3>
    <table class="table table-striped">
    <thead>
        <tr style="font-size: 14px;">
            <th>Name</th>
            <th>Price</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="(item,index) in products" class="prodimg">
            <td><h5>@{{item.name}}</h5></td>
            <td><h5>@{{item.price}}</h5></td>
            <td><button v-on:click.prevent="deleteProduct(index)">Delete 
            Product</button></td>
        </tr>
    </tbody>
 </table>

  <script type="text/javascript">
  new Vue({
    el:"#main",
    data:{
        products:[],
        title: "Products panel"
    },
    methods:{
        deleteProduct:function(r){
            this.$delete(this.products,r);
        }
    },
    created:function(){
        axios.get("/products/all").then(r=>{
            this.products = r.data;
        })
    }
    })
   </script>


    <?php
     namespace App\Http\Controllers;
     use Illuminate\Http\Request;
     use App\UserModel;
     use App\ProductModel;
     class Admin extends Controller
     {
     function productsPanel(){
        return view('/adminproducts');
     }
     function products(){
        return ProductModel::all();
     }   
     }

在 Laravel 和 Vue.js 中应该为此编写什么函数？

Answer 1

您需要一个可像这样调用的 DELETE api。

axios.delete(`/product/${product_id}`).then(r=>{
  // do something
})