Updating Variable on Screen using vue - vue.js

Question

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 class="form-floating mt-4 mb-2">
<input type="text" v-model="username" class="form-control"
id="inputUsername" placeholder="username_idea">
<label for="inputUsername">Your Username</label>
</div>
<button #click="validate" :disabled="!username"
type="button" id="search" class="btn btn-primary btn-lg">
<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)

Answer 1

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 class="form-floating mt-4 mb-2">
<input type="text" v-model="username" class="form-control"
id="inputUsername" placeholder="username_idea">
<label for="inputUsername">Your Username</label>
</div>
<button #click="validate" :disabled="!username"
type="button" id="search" class="btn btn-primary btn-lg">
<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>