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

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

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

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


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 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){
      this[modelKey] = type
      console.log('hair: ',
      console.log('eyes: ', this.eyes)