VueJS How to access Mounted() variables in Methods

Question

I'm new in Vue and would like assistance on how to access and use variables created in Mounted() in my methods.

I have this code

Template

<select class="controls" @change="getCatval()">

Script

mounted() {
    var allcards = this.$refs.allcards;
    var mixer = mixitup(allcards);
  },
methods: {
    getCatval() {
      var category = event.target.value;
      // I want to access mixer here;
    }
  }

I can't find a solution anywhere besides this example where I could call a method x from mounted() and pass mixer to it then use it inside my getCatval()

Is there an easier way to access those variables?

Answer 1

I will first suggest you to stop using var, and use the latest, let and const to declare variable

You have to first declare a variable in data():

data(){
  return {
    allcards: "",
    mixer: ""
  }
}

and then in your mounted():

mounted() {
  this.allcards = this.$refs.allcards;
  this.mixer = mixitup(this.allcards);
},
methods: {
  getCatval() {
    let category = event.target.value;
    
    this.mixer
  }
}