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
– maris

2020-12-26 19:13:36 +00:00
Commented Dec 26, 2020 at 19:13 — maris
– maris, Commented Dec 26, 2020 at 19:13

svarog · Accepted Answer · 2022-04-15 07:02:17Z

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, 2022 at 7:02

svarog

9,8855 gold badges66 silver badges79 bronze badges

answered May 25, 2019 at 8:40

Ninth Autumn

4611 gold badge5 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jonathan Over a year ago

is there no other way than having them returned from data()

Terry Over a year ago

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.

RollingInTheDeep Over a year ago

This makes the variable reactive, if you dont want the overhead of reactivity, there must be a better way ?

MounirOnGithub · Accepted Answer · 2019-05-25 08:59:17Z

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

edited May 25, 2019 at 8:59

answered May 25, 2019 at 8:54

MounirOnGithub

6993 gold badges10 silver badges23 bronze badges

Comments

svarog · Accepted Answer · 2022-04-15 07:03:31Z

0

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

edited Apr 15, 2022 at 7:03

svarog

9,8855 gold badges66 silver badges79 bronze badges

answered May 25, 2019 at 9:48

Satyam Pathak

6,9603 gold badges28 silver badges52 bronze badges

4 Comments

Jonathan Over a year ago

how do I access mixer in getCatVal()

Satyam Pathak Over a year ago

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

Jonathan Over a year ago

mixer initialize the mixitup plugin and can then be used to filter cards

Satyam Pathak Over a year ago

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

Collectives™ on Stack Overflow

VueJS How to access Mounted() variables in Methods

3 Answers 3

3 Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related