Vueピット-axiosデータ付与エラーUncaut(in promise)TypeError:Cannot set property'mes'of undefined
7830 ワード
最近vueに入門していますが、axiosリクエストで返されたデータをdataのデータ項目に割り当てる必要があります.dataのデータ項目はページに双方向にバインドされてレンダリングされます.
ただし、コールバック関数で値を割り当てるときにエラーが発生しました.元のコードは次のとおりです.
実行時に、データは要求できますが、
エラーの原因
thenでは
解決策
1、ES 6矢印関数で、矢印方法は外部のvueオブジェクトと変数を共有することができる
関数functionが役割ドメインを遮断することを回避します.
2、thatを使用して外部を指すthis
ただし、コールバック関数で値を割り当てるときにエラーが発生しました.元のコードは次のとおりです.
methods:{
tijiao(){
this.axios({
method:'post',
params:
{
yhm:this.yhm,
pwd:this.pwd
},
url:'http://localhost:1111/01/zhuce'
}).then(function(resp){
console.log(resp.data);
this.mes=resp.data;
})
}
}
実行時に、データは要求できますが、
TypeError: Cannot set property ‘listgroup’ of undefined
とエラーが発生します.つまり、要求されたデータはdataのデータ項目にバインドできません.エラーの原因
.then(function(resp){
console.log(resp.data);
this.mes=resp.data; //
})
thenでは
function callback
なので、コールバック関数ではthis HTTP request event, vue
になります.解決策
1、ES 6矢印関数で、矢印方法は外部のvueオブジェクトと変数を共有することができる
methods:{
tijiao(){
this.axios({
method:'post',
params:
{
yhm:this.yhm,
pwd:this.pwd
},
url:'http://localhost:1111/01/zhuce'
}).then(resp=>{
//
console.log(resp.data);
this.mes=resp.data;
})
}
}
関数functionが役割ドメインを遮断することを回避します.
2、thatを使用して外部を指すthis
methods:{
tijiao(){
var that=this; // that this( vue )
this.axios({
method:'post',
params:
{
yhm:this.yhm,
pwd:this.pwd
},
url:'http://localhost:1111/01/zhuce'
}).then(function(resp){
console.log(resp.data);
this.mes=resp.data;
})
}
}