时间戳

首页 > 解决方案 > Vue 和 Axios，这个回调的东西让我很困惑。错误：'v-on 处理程序中的错误：“TypeError：无法读取未定义的属性'成功'”'

javascript - Vue 和 Axios，这个回调的东西让我很困惑。错误：'v-on 处理程序中的错误：“TypeError：无法读取未定义的属性'成功'”'

问题描述

所以，我是一个新的 Vue 和 JS 编码器（c++ 和 c#） 我有一个 vue 应用程序，带有一个按钮，在 v-onclick 中，它正在调用 vue 实例上的一个方法。

在该方法中，它使用带有 .Then 承诺的 axios。

在上一个问题之后，我通过将 then 转换为箭头函数，让它在我的第一个应用程序中工作。

我花了很多时间研究 JavaScript 的“this”问题，并发现 click 事件->axios 承诺链对 this 的含义做了一些奇怪的事情......

将整个 Vue 视图页面复制到一个新应用程序。不工作

收到此错误。

vue.runtime.esm.js?2b0e:619 [Vue 警告]：v-on 处理程序中的错误：“TypeError：无法读取未定义的属性‘成功’”

在发现

> ---> <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

按钮：

<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>

Vue 对象上的方法对象

 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;
            },
        },

我找到了这篇文章，并尝试了列出的所有 3 个选项，但我仍然收到错误....

从 Axios 访问 VUE JS 的数据

我知道问题是“Javascript Scope and Closure”，我已经阅读了 5-6 篇关于此的文章......

我不知道为什么标准答案在这里不起作用......（特别是当页面/视图/代码在我的其他应用程序中工作时）

我对 Vue 和非 Basic JS 非常陌生，所以这可能是一个愚蠢的错误

标签： javascriptvue.jsvuejs2axios

解决方案

尝试这个：

...

   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;
},

推荐阅读