0👍
You can see the following after code
export default{
data(){
return{
title:"Form Register",
formdata:{},
message:"",
success:0,
}
},
methods:{
register(){
this.axios.post("http://localhost:8888/form-register",this.formdata).then((response) => {
console.log(response);
if(response.data.success>0){
this.message="You register success";
this.success=response.data.success;
}
else{
this.message="Register to failed";
this.success=response.data.success;
}
});
},
}
}
- [Vuejs]-Vee-validate: Custom rule gets multiple times called
- [Vuejs]-Vue.js testing toBe() method return only object when expected 'string' etc
0👍
If you use arrow functions like () => {...}
it binds current context. And this
will point to right context. So if you use it instead of function() {...}
where context is not binded it will work. Like
.then(response => {this.attribute = 'value'}
0👍
This is a really common stumbling block for developers. The reason is that inside an axios function your code out of scope of the object containing the axios method call. This can more easily be see if you rewrite this block of code to be like the one below it:
var vm = {
function doWork(){
axios.post('my/route', {
attribute: this.attribute //this works
}).then(function (response) {
vm.attribute = 'value'; //this works
this.attribute = 'value'; //this does not work
});
}
}
is functionally equivalent to:
var vm = {
function doWork(){
axios.post('my/route', {
attribute: this.attribute //this works
}).then(followOnWork(response));
}
}
function followOnWork(response){
vm.attribute = 'value'; //this works
this.attribute = 'value'; //this does not work
}
As you can see in this refactored code, followOnWork
is running totally independently of the vm
object. So any use of a this
variable in followOnWork
isn’t going to relate to the vm
object. Where as vm
is the actual name of the object and once the object is created it can be accessed from anywhere via the vm
variable.
You can get around this “out of scope” problem by using an arrow function (as mentioned by @MakarovSergey) if ES6 is an option for you.
- [Vuejs]-Vue router inside component doesn't redirect
- [Vuejs]-Semantic UI dropdown value getting retained, when the table row is deleted