Is there a way to pass a reactive variable in a method call in vue?

user_8054458 0
Viewed 423

i want it so that i can call a variable and manipulate it in the method like this,

<template>
<div>
<a @click=change(hair,'red')>Red</a>
<a @click=change(hair,'blue')>Blue</a>
<a @click=change(eyes,'yellow')>Yellow</a>
</div>
</template>


data() {
  return {
    eyes: '',
    hair: ''
  }
}

methods: {
   change(model, type){
     model = type
     ... someother actions
   }
}

when i call the change function it receives a model and a text and then i can manipulate it on the methods area

vue.js javascript
2 Answers
<template>
<div>
<a @click=change(hair,'red')>Red</a>
<a @click=change(hair,'blue')>Blue</a>
<a @click=change(eyes,'yellow')>Yellow</a>
</div>
</template>


data() {
  return {
    eyes: '',
    hair: ''
  }
}

methods: {
   change(model, type){
     // This line will update the state
     this[model] = type
   }
}
user_85461280

You have to put the value of @click= in quotes for it to work.

<a @click="change(hair,'red')">Red</a>

Also, you are passing the value of this.eyes and this.hair in as function arguments when the link is clicked. This means when the change function runs, the model argument is set to an empty string.

What you want is an identifier so you know which to property to update. Just pass in a string for the data key you want to update:

<a @click="change('hair','red')">Red</a>

and your change method becomes:

  methods: {
    change(modelKey, type){
      console.log(modelKey)
      this[modelKey] = type
      console.log('hair: ', this.hair)
      console.log('eyes: ', this.eyes)
    }
  }
user_34626710
Related