Блог

я хочу, чтобы я мог вызывать переменную и манипулировать ею в методе следующим образом,

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

когда я вызываю функцию изменения, она получает модель и текст, а затем я могу управлять ею в области методы

Вы должны указать значение @click= в кавычках, чтобы это сработало.

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

Кроме того, вы передаете значение this.eyes и this.hair в качестве аргументов функции при нажатии на ссылку. Это означает, что при запуске change функции model аргумент устанавливается в пустую строку.

Что вам нужно, так это идентификатор, чтобы вы знали, какое свойство обновлять. Просто введите строку для ключа данных, который вы хотите обновить:

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

и ваш метод изменения становится:

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

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