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?

Use arrow function instead of normal function xxx(args). – maris Dec 26 '20 at 19:13 — maris, Dec 26 '20 at 19:13

score 14 · Accepted Answer · edited Apr 15 '22 at 07:02

14

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

edited Apr 15 '22 at 07:02

svarog

9,477
4
61
77

answered May 25 '19 at 08:40

Ninth Autumn

461
1
5
10

1

is there no other way than having them returned from data() – Jonathan May 25 '19 at 08:47
2

`this.$refs` is not reactive anyway, so there's no need to cache it into the data store on the mounted lifecycle hook. Just do `this.mixer = mixitup(this.$refs.allcards)` is sufficient. – Terry May 25 '19 at 11:17
This makes the variable reactive, if you dont want the overhead of reactivity, there must be a better way ? – RollingInTheDeep Nov 28 '22 at 10:20

MounirOnGithub · Answer 2 · 2019-05-25T08:59:17.317

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); },
  },

score 0 · Answer 3 · edited Apr 15 '22 at 07:03

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

I can try to help you more if you could explain what will be the `mixer` - if its having value returned by `fn` then I have give you example above. In short 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 — Satyam Pathak, May 25 '19 at 10:55
mixer initialize the mixitup plugin and can then be used to filter cards — Jonathan, May 25 '19 at 10:59
Have you tried the second way I have explained in my example or the first one? - Initialize your mixitup plugin in different file and import it as mixin - now when component get mounted just execute the method and do your next job — Satyam Pathak, May 25 '19 at 11:08

VueJS How to access Mounted() variables in Methods

3 Answers3