0

I have a fairly large Vue/Vuitify project that does not work. I have reduced the project to a small program that illustrates the error. I have tried everything I can think of and even things that I could not think of. A little help would be greatly appreciated.

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

After the program loads, and the "Go" button is clicked, I get the following error in the JS console:

[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)
Timothy Knautz
  • 5
  • 5

1 Answers1

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

just like this，the arrow function does not has it's own this.

Len.liu
  • 34
  • 3