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

Question

我有一个相当大的 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)

Answer 1

   btnClicked(){
      this.value = 'qwerty'
    }

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