如何在 vuejs 单文件组件中的组件中引用自身

Question

这是我的代码：

 export default {
        data(){
            return {
                list: {}
            }
        },
        components: {
          listFields : ListFields
        },
        methods : {
            submitForm(data){
                let vm = this;
                console.log(vm);
                axios.post('/api/dashboard/lists/create', data)
                    .then(function (response) {
                        this.$router.push({path: 'show-list', params: {list_id: response.data.id}});
                    }).catch(function (error) {
                        console.log(error);
                    })
            }
        }
    }

问题在于，在我调用“this.$router.push”的方法内部，它会引发错误，因为 this 引用了该函数。但问题是我无法引用 vm，因为我正在导出组件。我怎么解决这个问题？

Answer 1

您的回调函数不知道外部上下文。

要么使用 .bind(this) 要么声明 var that = this;

axios.post('/api/dashboard/lists/create', data)
  .then(function (response) {
    this.$router.push({path: 'show-list', params: {list_id: response.data.id}});
  }.bind(this)).catch(function (error) {
    console.log(error);
  })

或

var that = this;
axios.post('/api/dashboard/lists/create', data)
  .then(function (response) {
    that.$router.push({path: 'show-list', params: {list_id: response.data.id}});
  }).catch(function (error) {
    console.log(error);
  })

更新： 由于不知何故似乎没有任何效果，您可以尝试以下操作：为回调声明一个单独的方法

    methods : {
        submitForm(data){
            axios.post('/api/dashboard/lists/create', data)
                .then(this.onSuccess)
                .catch(function (error) {
                    console.log(error);
                })
        },
        onSuccess(response) {
           this.$router.push({path: 'show-list', params: {list_id: response.data.id}});
        }
    }