VueJS资源在确切的代码上抛出未定义的错误作为其他项目

Question

我正在学习VueJS，我喜欢它！但在过去的两天里，我一直陷入一个奇怪的问题。我做了一个以前的项目，那里完全相同的代码工作。在我的新项目（学习项目）中，相同的代码不起作用。

它导致此错误：

我的代码如下（除了资源，一切都很完美）：Main.js

import Vue from 'vue'
import App from './App.vue'
import VueResource from 'vue-resource'
import router from './router'

Vue.config.productionTip = false
Vue.use(VueResource);

Vue.http.options.root = 'https://myapi.com/v1/list/';
Vue.http.interceptors.push((resource, next) => {
    this.method = 'GET';
    next();
});

new Vue({
    el: '#app',
    router,
    render: h => h(App)
});

主页。查看代码：

<template>
    <div>
        <StatsRowOne></StatsRowOne>
        <button class="btn btn-primary" v-on:click="submit">search</button>
    </div>
</template>

<script>
    import StatsRowOne from './elements/StatsRowOne';

    export default {
        data(){
            return {
                results: [],
                resource: {}
            }
        },
        components: {
            StatsRowOne: StatsRowOne
        },
        methods: {
            submit() {

                this.resource.get().then(function(response) {
                    alert('done');
                });

            }
        },
        created() {
            this.resource = this.$resource('auto');
        }
    }
</script>

<style lang="scss" scoped>

</style>

Answer 1

我的评论进一步解释：你的this.method文件中第7行未定义main.js，因为它用于箭头函数。请记住，ES6中的箭头函数保留了词法this，因此您实际上没有正确访问该属性，因为this没有指向回调中拦截器暴露的任何内容。

根据documentation，你似乎应该使用resource.method代替。