从Axios访问VUE JS的数据

Question

我有一个Vue JS(Vuetify)应用程序,它发出一个ajax请求,我想用响应填充div的内容,但是我在访问实例的数据时遇到了困难.我看到的所有示例都使用它来指向数据对象,但是当我这样做时,我得到了这个错误

Unable to set property 'message' of undefined or null reference

该应用程序非常简单:

main.js:

import Vue from 'vue'
import App from './App.vue'
import Vuetify from 'vuetify'


Vue.use(Vuetify)

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

App.vue

export default {
  data () {
    return {
    ....
    message: '',
    order: {},
    ...
  },
  methods: {
    send: function() {
      axios.post(this.api+"orders",this.order).then(function(response) {
        this.message = "Your payment was successful";
        ...
      }
   }
 }

this.order是不与爱可信的问题访问后法然而,处理返回的承诺匿名函数似乎有访问问题this.message,在违背我所看到的例子.

我在这做什么不同呢？

Answer 1

我可以为您的问题考虑这些解决方案.

1)您可以创建this并使用它.

send: function() {
  let self = this
  axios.post(this.api + "orders", this.order).then(function(response) {
    self.message = "Your payment was successful"
  }
}

2)arrow function将使您能够使用this指向Vue实例的内容.

send: function() {
  axios.post(this.api + "orders", this.order).then(response => {
    this.message = "Your payment was successful"
  }
}

3)bind用于指定一个对象this,在该情况下,该对象将是当前的Vue实例.

send: function() {
  axios.post(this.api + "orders", this.order).then(function(response) {
    this.message = "Your payment was successful"
  }.bind(this))
}

Answer 2

你的问题是这条线

axios.post(this.api+"orders",this.order).then(function(respo??nse) {

示例可能会this像您说的那样使用，但是通过使用第二级嵌套函数表达式，您正在访问this与您认为不同的动态。

基本上，send是 Vue 对象的方法，但由于this在function表达式内部没有词法作用域，仅在=>函数内部，this因此您在传递给Promise.prototype.then.

这是一个细分：

methods: {
  send: function() {
    // here: `this` technically refers to the `methods` object
    // but Vue lifts it to the entire view object at runtime
    axios.post(this.api + "orders", this.order)
      .then(function(response) {
        // here: `this` refers to the whatever object `the function is called on
        // if it is called as a method or bound explicitly using Function.prototype.bind
        // the Promise instance will not call it on anything
        // nor bind it to anything so `this` will be undefined
        // since you are in a module and modules are implicitly strict mode code.
        this.message = "Your payment was successful";
      });
    }
 }

试试这个

export default {
  data() {
    return {
    message: "",
    order: {},
  },
  methods: {
    send: function() {
      // here: `this` technically refers to the `methods` object
      // but Vue lifts it to the entire view object at runtime
      axios.post(this.api + "orders", this.order).then(response => {
        // here: this refers to the same object as it does in `send` because
        // `=>` functions capture their outer `this` reference statically.
        this.message = "Your payment was successful";
      });
    }
  }
}

或者更好

export default {
  data() {
    return {
    message: "",
    order: {},
  },
  methods: {
    async send() {
      const response = await axios.post(`${this.api}orders`, this.order);
      this.message = "Your payment was successful";
    }
  }
}

请注意，在使用 JavaScript 最近标准化async/await功能的第二个示例中，我们已经完全抽象出对回调的需求，因此这一点变得没有实际意义。

我在这里建议它，不是因为它与您的问题有关，而是因为它应该是编写 Promise 驱动代码的首选方式，如果您可以使用它是基于您使用其他语言功能的方式。当使用 Promises 时，它会导致更清晰的代码。

然而，这个答案的关键点是this参考的范围。