Vue3 - How do I pass through a variable name on a @click function?

Question

I have a button that activates the raiseStat() function. I want to pass through the name of an existing variable so that a function can then modify that specific variable.

The button:

<button @click="raiseStat(health)">Add</button>

The data I want to modify:

data(){
    return{
        health: 1,
    }
},

The function:

 methods: {
    raiseStat(statName){
      statName++
    },

},

When I console.log the variable within the function it says '1' which makes sense, I'm passing through the value of the variable, not the name.

So how would I refer to the name of this variable rather than the value?

Thanks

See stackoverflow.com/questions/4244896/…

Estus Flask
– Estus Flask

2022-08-11 11:13:23 +00:00
Commented Aug 11, 2022 at 11:13 — Estus Flask
– Estus Flask, Commented Aug 11, 2022 at 11:13

Peter Pointer · Accepted Answer · 2022-08-11 11:47:22Z

4

You can declare stats as object and then access to the 'health' key :

<button @click="raiseStat('health')">Add</button>

data(){
    return{
        health: 1,
    }
},
methods: {
    raiseStat(statName){
      this[statName] += 1
},

edited Aug 11, 2022 at 11:47

Peter Pointer

4,2542 gold badges21 silver badges40 bronze badges

answered Aug 11, 2022 at 11:23

SIHEM BOUHENNICHE

4365 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Hunter Forrester Over a year ago

Thanks for the reply @SIHEM ! I actually get an error clicking the button after updating this: Uncaught TypeError: Cannot read properties of undefined (reading 'health')

Peter Pointer Over a year ago

In your code you have health not stats.health so it would be this[statName] instead I'm guessing.

Hunter Forrester Over a year ago

@Peter that's right, changing it to this[statName] worked. Thanks guys

SIHEM BOUHENNICHE Over a year ago

So it should work, look at the data i've changed the declaration of 'health' to be included inside an object called 'stats', are you sure to access the 'stats[statName]' and not directly 'this[statName]'

Collectives™ on Stack Overflow

Vue3 - How do I pass through a variable name on a @click function?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related