Question

我有一个Vue JS（Vuetify）应用程序发出ajax请求，我想用响应填充div的内容，但是我在访问实例的数据时遇到了困难。我见过的所有示例都使用 this 指向数据对象，但是当我这样做时出现此错误

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";
        ...
      }
   }
 }

使用Axios的 post 方法可以轻松访问

this.order 但是处理承诺的匿名函数似乎在访问时遇到问题。消息，与我见过的例子相反。

我在这做什么不同？

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参考的范围。

从Axios

2 个答案: