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

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

Answer

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
},