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

Answer 2

like Ninth Autumn said : object returned by the data function and props of your components are defined as attributes of the component, like your methods defined in the method attribute of a component, it's in this so you can use it everywhere in your component !

Here an example:

  data() {
    return {
      yourVar: 'hello',
    };
  },
  mounted() { this.sayHello(); },
  method: {
    sayHello() { console.log(this.yourVar); },
  },

Answer 3

Update

you cannot pass any value outside if it's in block scope - Either you need to get it from a common place or set any common value

---

As I can see, var mixer = mixitup(allcards); is in the end acting as a function which does some operation with allcards passed to it and then returns a value.

1 - Place it to different helper file if mixitup is totally independent and not using any vue props used by your component

In your helper.js

const mixitup = cards => {
  // Do some operation with cards
  let modifiedCards = 'Hey I get returned by your function'
  return modifiedCards
}

export default {
    mixitup
}

And then in your vue file just import it and use it is as a method.

In yourVue.vue

import Helpers from '...path../helpers'

 const mixitup = Helpers.mixitup

 export default {
    name: 'YourVue',
    data: ...,
    computed: ...,
    mounted() {
      const mixer = mixitup(allcards)
    },
    methods: {
       mixitup, // this will make it as `vue` method and accessible through 
         this
       getCatval() {
          var category = event.target.value;
          this.mixitup(allcards)
        }
    }
  }

2- Use it as mixins if your mixitup dependent to your vue and have access to vue properties

In your yourVueMixins.js:

export default {
    methods: {
         mixitup(cards) {
          // Do some operation with cards
          let modifiedCards = 'Hey I get returned by your function'
          return modifiedCards
        }
    }
}

And import it in your vue file:

 import YourVueMixins from '...mixins../YourVueMixins'

 const mixitup = Helpers.mixitup

 export default {
    name: 'YourVue',
    mixins: [YourVueMixins] // this will have that function as vue property
    data: ...,
    computed: ...,
    mounted() {
      const mixer = this.mixitup(allcards)
    },
    methods: {
       getCatval() {
          var category = event.target.value;
          this.mixitup(allcards)
        }
    }
  }