“TypeError：无法读取未定义的属性” [重复]

Posted 2023-02-22

【中文标题】“TypeError：无法读取未定义的属性” [重复]

【英文标题】："TypeError: Cannot read property of undefined" [duplicate]

【发布时间】：2021-03-18 09:45:43

【问题描述】：

我有一个相当大的 Vue/Vuitify 项目无法运行。我已将项目简化为一个说明错误的小程序。我已经尝试了我能想到的一切，甚至我想不到的东西。非常感谢您的帮助。

这是AppTry.vue：

<template>
  <v-container>
    <v-main>
      <div>Hello! The value is:  value </div>
      <v-btn
          color="#0A368E"
          class="mr-4 white--text"
          @click="btnClicked"
      >
        Go
      </v-btn>
    </v-main>
  </v-container>
</template>

<script>
export default 
  name: "AppTry",
  data() 
    return 
      value: '',
    
  ,
  methods: 
    btnClicked: () => 
      this.value = 'qwerty'
    
  

</script>

<style scoped>
</style>

程序加载后，点击“Go”按钮，在JS控制台出现如下错误：

[Vue warn]: Error in v-on handler: "TypeError: Cannot set property 'value' of undefined"

found in

---> <VBtn>
       <VMain>
         <AppTry> at src/components/AppTry.vue
           <VApp>
             <App> at src/App.vue
               <Root>
vue.runtime.esm.js?2b0e:1888 TypeError: Cannot set property 'value' of undefined
    at VueComponent.btnClicked (AppTry.vue?467d:26)
    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:3888)
    at VueComponent.click (vuetify.js?ce5b:2484)
    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:6917)

【参考方案1】：

   btnClicked()
      this.value = 'qwerty'
    

就这样，箭头函数没有自己的this。

【讨论】：

哦，哇...我不知道...谢谢@Len.liu！！！