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

Question

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

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

app.js:38907 删除http://127.0.0.1:8000/clients/2/delete 419（状态未知）

127.0.0.1/:1 未捕获（承诺）响应 {url: "/clients/2/delete", ok: false, status: 419, statusText: "unknown status", headers: Headers, …}

我尝试过以下代码：

应用程序.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',

    });

客户端组件.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>

Answer 1

419 表示 csrf 令牌丢失或不匹配。可以修改每个请求默认添加x-csrf-token。将此代码放在使用vueResource之后Vue.use(VueResource)Vue.http.interceptors.push(function(request) {&nbsp; request.headers.set('X-CSRF-TOKEN', $('meta[name="csrf-token"]').attr('content'));});https://github.com/pagekit/vue-resource/blob/develop/docs/http.md#request-processing