Vue and Axios, this callback stuff is confusing me. Error: 'Error in v-on handler: “TypeError: Cannot read property 'success' of undefined”'

Question

So, I'm a new Vue and JS coder (c++ and c#) I have a vue app, with a button, in the v-onclick, it's calling a method on the vue instance.

In that method it uses axios with the .Then promise.

After a previous question, I got it working in my first app by converting the then to an arrow function.

I spent alot of time digging into JavaScripts "this" issues and get that the click event->axios promise chain does weird things to the meaning of this...

Copied the whole Vue view page to a new app. Not working

Getting this error.

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'success' of undefined"

found in

> ---> <VBtn>
>        <VCard>
>          <VForm>
>            <StudentPortalData> at src/views/StudentPortalData.vue
>              <VMain>
>                <VApp>
>                  <App> at src/App.vue
>                    <Root> warn @ vue.runtime.esm.js?2b0e:619 logError @ vue.runtime.esm.js?2b0e:1884 globalHandleError @
> vue.runtime.esm.js?2b0e:1879 handleError @
> vue.runtime.esm.js?2b0e:1839 invokeWithErrorHandling @
> vue.runtime.esm.js?2b0e:1862 invoker @ vue.runtime.esm.js?2b0e:2179
> invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854 Vue.$emit @
> vue.runtime.esm.js?2b0e:3882 click @ VBtn.ts?0eff:158
> invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854 invoker @
> vue.runtime.esm.js?2b0e:2179 original._wrapper @
> vue.runtime.esm.js?2b0e:6911 vue.runtime.esm.js?2b0e:1888 TypeError:
> Cannot read property 'success' of undefined
>     at VueComponent.validate (StudentPortalData.vue?ad47:84)
>     at click (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"317935a6-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/StudentPortalData.vue?vue&type=template&id=7c5f5f87&
> (app.js:992), <anonymous>:61:38)
>     at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
>     at VueComponent.invoker (vue.runtime.esm.js?2b0e:2179)
>     at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
>     at VueComponent.Vue.$emit (vue.runtime.esm.js?2b0e:3882)
>     at VueComponent.click (VBtn.ts?0eff:158)
>     at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
>     at HTMLButtonElement.invoker (vue.runtime.esm.js?2b0e:2179)
>     at HTMLButtonElement.original._wrapper (vue.runtime.esm.js?2b0e:6911) logError @ vue.runtime.esm.js?2b0e:1888
> globalHandleError @ vue.runtime.esm.js?2b0e:1879 handleError @
> vue.runtime.esm.js?2b0e:1839 invokeWithErrorHandling @
> vue.runtime.esm.js?2b0e:1862 invoker @ vue.runtime.esm.js?2b0e:2179
> invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854 Vue.$emit @
> vue.runtime.esm.js?2b0e:3882 click @ VBtn.ts?0eff:158
> invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854 invoker @
> vue.runtime.esm.js?2b0e:2179 original._wrapper @
> vue.runtime.esm.js?2b0e:6911

Button:

<v-row wrap class="pr-2 my-2">
                <v-layout>
                    <v-spacer></v-spacer>
                    <v-btn tile color="primary"
                           :disabled="!isFormValid"
                           v-on:click="validate()"
                           class="mr-1">
                        Get the stuff from the thing
                    </v-btn>
                </v-layout>
            </v-row>

Methods Object on Vue object

 methods: {
            validate() {
                this.$log.success("validate - in");
                this.fetchData();
            },
            fetchData: () => {// was function ()
                let vuethis = this;// hope hack

                vuethis.isloading = true;
                vuethis.$log.success("fetchData - in");
                const obj = {};
                obj.Url = vuethis.API_URL + "AdStudent/?";
                obj.StudentAdName = this.adNameIn
                axios.get(obj.Url + "StudentAdName=" + obj.StudentAdName)

                    .then(response => {
                        vuethis.info = response.data;
                        vuethis.isloaded = true;
                    })
                    .catch(function (error) {
                        vuethis.$log.error(error);
                    });

                this.isLoading = false;
            },
        },

I found this post, and tried all 3 options listed and I'm still getting the error....

Accessing VUE JS's data from Axios

I know the issue is "Javascript Scope and Closure", and I've read 5-6 articles about that...

What I don't know is why the standard answers aren't working here... (Especially when the page/view/code worked in my other app)

I'm VERY new to Vue, and non Basic JS, so it's probably a boneheaded error I'm too noobish in this language to grok....

fetchData: () => { won't work. Using an arrow function inherits this from the surrounding scope but that isn't what you want. That needs to be a regular function, or fetchData () { for short. That said, the problem may well be nothing to do with the this value. What is $log and where are you expecting that to come from? — skirtle
Dude, i think you nailed it, I was looking right at it, i added the vue logging component at the end of the day and never tested it. I'll try commenting all those calls out. — Eric Brown - Cal
Yep, that was it, if you want to add it as an answer I'll mark it correct. Thanks! — Eric Brown - Cal

Damian Perez Damian Perez · Accepted Answer · 2020-08-25T16:51:55

try this:

...

   async fetchData()  {
  this.isloading = true;
  this.$log.success("fetchData - in");
  const obj = {};
  obj.Url = this.API_URL + "AdStudent/?";
  obj.StudentAdName = this.adNameIn 


let result = await axios.get(obj.Url + "StudentAdName=" + obj.StudentAdName)
                    .then(response => response.data)
                    .catch(e => e.response)

//Before proceding we first check if there is any error on the http response, you can check that with the status
  if(result.status === 500) { //status could be 422,400 or any other 
       console.log(result)
      this.isLoading = false;
      return;
     }
                 this.info = result;
                 this.isLoading = false;
                return;
},

Vue and Axios, this callback stuff is confusing me. Error: 'Error in v-on handler: “TypeError: Cannot read property 'success' of undefined”'

1 Answers