Updating Variable on Screen using vue

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)

Why do you have the variables username and pressed defined before the export default? — qimolin
– qimolin, Commented Apr 1, 2022 at 14:26
Okay, no worries. Only define the variables in the data(). This will make the variables reactive and should fix your problem. — qimolin
– qimolin, Commented Apr 1, 2022 at 14:44
Unfortunately not. I still get Uncaught TypeError: Cannot set properties of undefined (setting 'pressed') when pressing the button. — lechnerio
– lechnerio, Commented Apr 1, 2022 at 14:49
Ah yes sorry. You shouldn't define arrow functions in methods(). Instead, just use regular functions. This is because an arrow function defines its own 'this' value. I posted an answer. Hope this helps. — qimolin
– qimolin, Commented Apr 1, 2022 at 14:55

qimolin · Accepted Answer · 2022-04-01 14:58:15Z

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>

Collectives™ on Stack Overflow

Updating Variable on Screen using vue

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related