如何在 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) {

  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