Javascript 如何在Vue JS组件中发出AJAX删除请求？

我有一个Vue JS组件，其中包含一个模式，询问用户是否要删除带有“是/否”选项的特定记录。我希望在单击Yes按钮时发出一个AJAX删除请求，现在我正在尝试将AJAX代码移动到我的Vue组件中并使用Vue资源

当前删除时，我在chrome devtools控制台中收到以下错误消息：

app.js:38907删除419（未知状态）

127.0.0.1/：1未捕获（承诺中）响应{url:“/clients/2/delete”，确定：错误，状态：419，状态文本：“未知状态”，标题：标题，…}

我尝试了以下代码：

app.js

    Vue.component('client', require('./components/ClientComponent.vue').default);
    
    /**
     * Next, we will create a fresh Vue application instance and attach it to
     * the page. Then, you may begin adding components to this application
     * or customize the JavaScript scaffolding to fit your unique needs.
     */
    
    import VueResource from 'vue-resource';
    
    Vue.use(VueResource);
    
    const app = new Vue({
        el: '.table-container',
    });

ClientComponent.vue

    <template>
        <li :data-clientID="client.id"><a :href="this.homeRoute">{{ client.first_name + ' ' + client.last_name }}</a>
            <span class="delete_x" data-toggle="modal" v-bind:data-target="delete_modal" :data-model="client.id">x</span>

            <div class="modal fade" v-bind:id="delete_id" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">          
                            <h4 class="modal-title" id="myModalLabel">Are you sure you want to delete client {{ client.first_name + ' ' + client.last_name }}?</h4>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        </div>
                        <div class="modal-footer">
                            <button type="button" v-on:click="onDelete" :data-clientID="client.id" class="delete_button btn btn-default" data-dismiss="modal">Yes</button>
                            <button type="button" class="btn btn-primary">No</button>
                        </div>
                    </div>
                </div>
            </div>        
        </li>
    </template>
    
    <script>
        export default {
            name: 'client',
            props: {
                client: {
                    type: Object,
                    required: true
                },
                homeRoute: {
                    type: String,
                    required: true
                }                
            },
            methods: {
                onDelete: function (message) {
                    
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });
                    $('.alert-success').hide();
                    this.$http.delete("/clients/" + this.client.id + "/delete")
                    .then(function(response) {
                        client.remove();
                    });
                }
            },
            computed: {
                delete_modal() {
                    return '#delete_modal_' + this.client.id; 
                },
                delete_id(){
                    return 'delete_modal_' + this.client.id;
                }
            }
        }

        
    </script>

任何不良行为都会很有帮助

谢谢

---

Rob

419表示csrf令牌丢失或不匹配

默认情况下，您可以修改每个请求以添加x-csrf-token。请在使用vueResource后放置此代码

Vue.use（VueResource）
Vue.http.interceptors.push（函数（请求）{
request.headers.set（'X-CSRF-TOKEN'，$）.attr（'content'）；
});

---

您正在jquery$.ajax上配置CSRF令牌，然后使用Vue发出请求。请看下面的答案。谢谢您的回复。然后我将如何从DOM中删除特定的客户机？（如果您愿意，我可以在中打开另一张带有此信息的车票）。

    Route::get('/clients/{client}/edit', ['as' => 'clients.edit', 'uses' => 'clientController@edit']);
    Route::put('/clients/{client}/update', ['as' => 'clients.update', 'uses' => 'clientController@update']);
    Route::delete('/clients/{client}/delete', ['as' => 'clients.delete', 'uses' => 'clientController@delete']);