Styjun

Can I get a photo of an Ancient Arrow?

Am I allowed to determine tenets of my contract as a warlock?

What did the 8086 (and 8088) do upon encountering an illegal instruction?

What do I need to do, tax-wise, for a sudden windfall?

Does WiFi affect the quality of images downloaded from the internet?

How to represent jealousy in a cute way?

How do I type a hyphen in iOS 12?

Harley Davidson clattering noise from engine, backfire and failure to start

Why does there seem to be an extreme lack of public trashcans in Taiwan?

Was the Lonely Mountain, where Smaug lived, a volcano?

Why did Robert pick unworthy men for the White Cloaks?

David slept with Bathsheba because she was pure?? What does that mean?

Placement of positioning lights on A320 winglets

Must a CPU have a GPU if the motherboard provides a display port (when there isn't any separate video card)?

Realistic, logical way for men with medieval-era weaponry to compete with much larger and physically stronger foes

Did I need a visa in 2004 and 2006?

How (un)safe is it to ride barefoot?

Is it advisable to add a location heads-up when a scene changes in a novel?

The best in flight meal option for those suffering from reflux

Which are the methodologies for interpreting Vedas?

Do Veracrypt encrypted volumes have any kind of brute force protection?

Part of my house is inexplicably gone

How to deal with an excess of white-space in a CRM UI?

Nth term of Van Eck Sequence

Vue: Losing context of “this” inside function promise

Vue display unescaped htmlvue resource promise callbackVue 2 - Mutating props vue-warnVue - Call Function from facebook button inside Vue-ComponentCan't set property inside of Axios promise in Vue JSVue.js - this.$refs.key returns an empty array or undefined instead of elementVue | Call method function inside of dataVueJS: variable is undefined inside computed onlyHow to use async/await inside promise - VueCreate a Vue Promise Function

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

0

1

I am losing the context of this on the "then" portion of my Promise. I marked the first debugger, which when I type in this, shows the value as the Vue component. I continue on and when I hit the next debugger statement inside the then portion of the Promise, the value of this is undefined even when using the fat arrow syntax.

Parent component

<Modal
 @emitshowflashmsg="handleShowCouponModal"
>

Child component (Modal.vue)

methods: 

 showFlash: function(msg, bool) 
 let data = msg, bool
 this.$emit('emitshowflash', data)
 ,

 updateShippingAddress: function() 

 debugger
 // `this` has a value here
 axios.post('/api/act/address', 
 street_address: this.$refs.streetAddress.value ? this.$refs.streetAddress.value : "",
 apartment: this.showSecondAddressLine ? this.$refs.apartment.value : "",
 city: this.$refs.city.value ? this.$refs.city.value : "",
 state: this.$refs.state.value ? this.$refs.state.value : "",
 zip: this.$refs.zip.value ? this.$refs.zip.value : ""
 )

 .then((response) => 
 debugger
 // `this` is undefined here
 if(response.data.success) 
 let msg = "Address updated!"
 this.showFlash(msg, true)
 
 )
 .catch(err => 
 console.log("errrrr")
 let msg = "Not valid address. Please check address again."
 this.showFlash(msg, true)

 );
 

vue.js

share|improve this question

edited Mar 25 at 1:39

Phil

102k13152171

asked Mar 25 at 0:19

jjoanjjoan

687

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Ignoring the debugger for a minute, are you getting any actual errors? If this was not your Vue component in the then() callback, I imagine you would get something like "this.showFlash is not a function". Is that what's happening?
  
  – Phil
  Mar 25 at 0:23
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Phil yea, that's how I noticed there was an issue. this.showFlash is triggering the catch and logging errrrr. When I removed this.showFlash(), the catch is not triggered
  
  – jjoan
  Mar 25 at 0:26
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Are you absolutely certain you're using an arrow function in then() and catch()? Perhaps your browser is running an older version of your script from cache
  
  – Phil
  Mar 25 at 0:27
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Just noticed your parent component is listening for emitshowflashmsg but you are emitting emitshowflash. Now, that wouldn't cause the issue you're seeing but it certainly won't do what you expect
  
  – Phil
  Mar 25 at 1:42
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  @Phil Aside of that, emitshowflashmsg is calling handleShowCouponModal method (from modal's parent component), but only modal's updateShippingAddress method is shown. Real mess :)
  
  – Styx
  Mar 25 at 15:05
  

  
  
  
  

 | 
show 5 more comments

0

1

I am losing the context of this on the "then" portion of my Promise. I marked the first debugger, which when I type in this, shows the value as the Vue component. I continue on and when I hit the next debugger statement inside the then portion of the Promise, the value of this is undefined even when using the fat arrow syntax.

Parent component

<Modal
 @emitshowflashmsg="handleShowCouponModal"
>

Child component (Modal.vue)

methods: 

 showFlash: function(msg, bool) 
 let data = msg, bool
 this.$emit('emitshowflash', data)
 ,

 updateShippingAddress: function() 

 debugger
 // `this` has a value here
 axios.post('/api/act/address', 
 street_address: this.$refs.streetAddress.value ? this.$refs.streetAddress.value : "",
 apartment: this.showSecondAddressLine ? this.$refs.apartment.value : "",
 city: this.$refs.city.value ? this.$refs.city.value : "",
 state: this.$refs.state.value ? this.$refs.state.value : "",
 zip: this.$refs.zip.value ? this.$refs.zip.value : ""
 )

 .then((response) => 
 debugger
 // `this` is undefined here
 if(response.data.success) 
 let msg = "Address updated!"
 this.showFlash(msg, true)
 
 )
 .catch(err => 
 console.log("errrrr")
 let msg = "Not valid address. Please check address again."
 this.showFlash(msg, true)

 );
 

vue.js

share|improve this question

edited Mar 25 at 1:39

Phil

102k13152171

asked Mar 25 at 0:19

jjoanjjoan

687

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Ignoring the debugger for a minute, are you getting any actual errors? If this was not your Vue component in the then() callback, I imagine you would get something like "this.showFlash is not a function". Is that what's happening?
  
  – Phil
  Mar 25 at 0:23
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Phil yea, that's how I noticed there was an issue. this.showFlash is triggering the catch and logging errrrr. When I removed this.showFlash(), the catch is not triggered
  
  – jjoan
  Mar 25 at 0:26
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Are you absolutely certain you're using an arrow function in then() and catch()? Perhaps your browser is running an older version of your script from cache
  
  – Phil
  Mar 25 at 0:27
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Just noticed your parent component is listening for emitshowflashmsg but you are emitting emitshowflash. Now, that wouldn't cause the issue you're seeing but it certainly won't do what you expect
  
  – Phil
  Mar 25 at 1:42
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  @Phil Aside of that, emitshowflashmsg is calling handleShowCouponModal method (from modal's parent component), but only modal's updateShippingAddress method is shown. Real mess :)
  
  – Styx
  Mar 25 at 15:05
  

  
  
  
  

 | 
show 5 more comments

I am losing the context of this on the "then" portion of my Promise. I marked the first debugger, which when I type in this, shows the value as the Vue component. I continue on and when I hit the next debugger statement inside the then portion of the Promise, the value of this is undefined even when using the fat arrow syntax.

Parent component

<Modal
 @emitshowflashmsg="handleShowCouponModal"
>

Child component (Modal.vue)

methods: 

 showFlash: function(msg, bool) 
 let data = msg, bool
 this.$emit('emitshowflash', data)
 ,

 updateShippingAddress: function() 

 debugger
 // `this` has a value here
 axios.post('/api/act/address', 
 street_address: this.$refs.streetAddress.value ? this.$refs.streetAddress.value : "",
 apartment: this.showSecondAddressLine ? this.$refs.apartment.value : "",
 city: this.$refs.city.value ? this.$refs.city.value : "",
 state: this.$refs.state.value ? this.$refs.state.value : "",
 zip: this.$refs.zip.value ? this.$refs.zip.value : ""
 )

 .then((response) => 
 debugger
 // `this` is undefined here
 if(response.data.success) 
 let msg = "Address updated!"
 this.showFlash(msg, true)
 
 )
 .catch(err => 
 console.log("errrrr")
 let msg = "Not valid address. Please check address again."
 this.showFlash(msg, true)

 );
 

vue.js

share|improve this question

edited Mar 25 at 1:39

Phil

102k13152171

asked Mar 25 at 0:19

jjoanjjoan

687

<Modal
 @emitshowflashmsg="handleShowCouponModal"
>

methods: 

 showFlash: function(msg, bool) 
 let data = msg, bool
 this.$emit('emitshowflash', data)
 ,

 updateShippingAddress: function() 

 debugger
 // `this` has a value here
 axios.post('/api/act/address', 
 street_address: this.$refs.streetAddress.value ? this.$refs.streetAddress.value : "",
 apartment: this.showSecondAddressLine ? this.$refs.apartment.value : "",
 city: this.$refs.city.value ? this.$refs.city.value : "",
 state: this.$refs.state.value ? this.$refs.state.value : "",
 zip: this.$refs.zip.value ? this.$refs.zip.value : ""
 )

 .then((response) => 
 debugger
 // `this` is undefined here
 if(response.data.success) 
 let msg = "Address updated!"
 this.showFlash(msg, true)
 
 )
 .catch(err => 
 console.log("errrrr")
 let msg = "Not valid address. Please check address again."
 this.showFlash(msg, true)

 );
 

share|improve this question

edited Mar 25 at 1:39

Phil

102k13152171

asked Mar 25 at 0:19

jjoanjjoan

687

share|improve this question

edited Mar 25 at 1:39

Phil

102k13152171

asked Mar 25 at 0:19

jjoanjjoan

687

edited Mar 25 at 1:39

Phil

102k13152171

edited Mar 25 at 1:39

Phil

102k13152171

asked Mar 25 at 0:19

jjoanjjoan

687

asked Mar 25 at 0:19

jjoanjjoan

687