14

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

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

该应用程序非常简单：

主.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)
})

应用程序.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可以通过 Axios 的post方法访问而没有问题，但是处理返回的承诺的匿名函数似乎在访问this.message时遇到了问题，这与我看到的示例相反。

我在这里做的不同是什么？

4

2 回答 2

44

我可以为您的问题想出这些解决方案。

1）您可以创建一个引用this并使用它。

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

2) Anarrow function将使您能够使用thiswhich 将指向您的 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))
}
于 2017-07-20T14:23:34.643 回答
6

你的问题是这条线

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

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

基本上，send是 Vue 对象的方法，但由于this不在function表达式内部的词法范围内，仅在函数内部，所以您在传递给的回调中=>有错误的引用。thisPromise.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参考的范围。

于 2017-07-20T14:14:36.437 回答