[英]Accessing VUE JS's data from Axios
I have a Vue JS (Vuetify) App that makes an ajax request that I would like to populate a div's content with the response, however I am having difficulties accessing the instance's data . 我有一个Vue JS(Vuetify)应用程序,它发出一个ajax请求,我想用响应填充div的内容,但是我在访问实例的数据时遇到了困难。 All examples I have seen use this to point to the data object, but when I do I get this error
我看到的所有示例都使用它来指向数据对象,但是当我这样做时,我得到了这个错误
Unable to set property 'message' of undefined or null reference
The app is quite simple: 该应用程序非常简单:
main.js : 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 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 is accessible without a problem with Axios' post method however the anonymous function that handles the promise returned seems to have a problem accessing this.message , in contrary to the examples I have seen. this.order是不与爱可信POST方法的问题然而,处理返回的承诺匿名函数似乎有访问this.message一个问题,相反,我所看到的例子访问。
What is it that I am doing differently here? 我在这做什么不同呢?
I can think of these solutions for your problem. 我可以为您的问题考虑这些解决方案。
1) You can create a reference to this
and use it. 1)您可以创建
this
的引用并使用它。
send: function() {
let self = this
axios.post(this.api + "orders", this.order).then(function(response) {
self.message = "Your payment was successful"
}
}
2) An arrow function
will enable you to use this
which will point to your Vue instance. 2)
arrow function
将使您能够使用this
,这将指向您的Vue的实例。
send: function() {
axios.post(this.api + "orders", this.order).then(response => {
this.message = "Your payment was successful"
}
}
3) Use bind
to assign an object to this
which will be the current Vue instance in your case. 3)使用
bind
为其分配一个对象, this
对象将是您案例中的当前Vue实例。
send: function() {
axios.post(this.api + "orders", this.order).then(function(response) {
this.message = "Your payment was successful"
}.bind(this))
}
Your problem is this line 你的问题是这一行
axios.post(this.api+"orders",this.order).then(function(response) {
Examples may use this
as you say however, by using a second level of nested function expression, you are accessing a different dynamic this
than you think you are. 实施例可使用
this
然而如你说,通过使用嵌套函数表达的第二电平,则正在访问不同的动态this
比你认为你是。
Basically, send
is the method of the Vue object, but since this
is not lexically scoped inside of function
expressions, only inside of =>
functions, you have the wrong this
reference in the callback you are passing to Promise.prototype.then
. 基本上,
send
是Vue的对象的方法,但由于this
不是词法作用域的内部function
表达式,只有内部的=>
函数,则有错误的this
在要传递到回调参考Promise.prototype.then
。
Here is a breakdown: 这是一个细分:
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";
});
}
}
Try this instead 试试这个
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";
});
}
}
}
or better yet 还是更好
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";
}
}
}
Note in the second example, which uses JavaScript's recently standardized async/await
functionality, we have abstracted away the need for a callback entirely so the point becomes moot. 请注意,在第二个示例中,它使用了JavaScript最近标准化的
async/await
功能,我们完全抽象出了对回调的需求,因此这一点变得毫无意义。
I suggest it here, not because it relates to your question, but rather because it should be the preferred way of writing Promise driven code if you have it available which you do based on your use of other language features. 我在这里建议,不是因为它与你的问题有关,而是因为它应该是编写Promise驱动代码的首选方式,如果你有它可以根据你对其他语言功能的使用而做。 It leads to clearer code when using Promises.
使用Promise时,它会带来更清晰的代码。
The key point of this answer however, is the scoping of the this
reference. 然而,这个答案的关键点是
this
参考的范围。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.