Updating Variable on Screen using vue-CodePudding

I'm not quite sure what I'm missing here. In my vue project I would like to update a variable (pressed) on screen. I'm able to update the second value (username) by passing v-model="username" on the input field.

when adding {{ pressed ? 'true' : 'false' }} to the template I'm only ever able to return the set value from the data() section.

If someone is able to explain the concept, I'm very thankful. I tried looking up the issue in the docs but I'm unable find an explaination.

the Code I'm working on:

<template>
   <div>
      <div >
        <input type="text" v-model="username"  
         id="inputUsername" placeholder="username_idea">
        <label for="inputUsername">Your Username</label>
      </div>
      <button @click="validate" :disabled="!username"
        type="button" id="search" >
        
        <VueFeather type="search"></VueFeather>
        validate
      
        {{ username == '' ? '@username ' : '@'   username }}
      </button>
   </div>
</template>

<script>
  let username = ''
  let pressed = false

  export default {

    data() {
      return{
        username: '',
        pressed: false
      }
    },

    methods: {

      validate: () => {
        
        console.log('fn validate called')

        this.pressed = true
        return{
          pressed: this.pressed
        }

      },
    },
  }
</script>

I get 2 Console Results:

[Vue warn]: Unhandled error during execution of native event handler 
  at <Search> 
  at <HomeView onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {…} > > 
  at <RouterView> 
  at <App>
warn @ runtime-core.esm-bundler.js?d2dd:38
logError @ runtime-core.esm-bundler.js?d2dd:212
handleError @ runtime-core.esm-bundler.js?d2dd:204
callWithErrorHandling @ runtime-core.esm-bundler.js?d2dd:158
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js?d2dd:164
invoker @ runtime-dom.esm-bundler.js?2725:366
runtime-core.esm-bundler.js?d2dd:218 

Uncaught TypeError: Cannot set properties of undefined (setting 'pressed')
    at Proxy.validate (Search.vue?8555:51:1)
    at onClick._cache.<computed>._cache.<computed> (Search.vue?8555:10:1)
    at callWithErrorHandling (runtime-core.esm-bundler.js?d2dd:155:1)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?d2dd:164:1)
    at HTMLButtonElement.invoker (runtime-dom.esm-bundler.js?2725:366:1)

CodePudding user response：

Use regular functions instead of arrow functions in Vue methods() lifecycle. This is because an arrow function defines its own 'this' value. See the code below:

<template>
   <div>
      <div >
        <input type="text" v-model="username"  
         id="inputUsername" placeholder="username_idea">
        <label for="inputUsername">Your Username</label>
      </div>
      <button @click="validate" :disabled="!username"
        type="button" id="search" >
        
        <VueFeather type="search"></VueFeather>
        validate
      
        {{ username == '' ? '@username ' : '@'   username }}
      </button>
   </div>
</template>

<script>
  export default {

    data() {
      return{
        username: '',
        pressed: false
      }
    },

    methods: {
      validate() {
        console.log('fn validate called')

        this.pressed = true
        return{
          pressed: this.pressed
        }
      },
    },
  }
</script>