Vuejs function in mounted lifecycle hook

Question

I would like my hideMe() function to be called during the mounted lifecycle hook in my Vuejs code. Currently it is not, and I don't understand why.

My code is below:

export default {
  data() {
    return {
      show: "initial"
    }
  }, 
  methods: {
    hideMe() {
     if(this.$vuetify.breakpoint.name == 'xs') {
        console.log("When is this rendered? " + this.$vuetify.breakpoint.name == 'xs');
        this.show = "none";
     }
   }
  },
  mounted() {
    this.hideme();
    console.log("This is a breakpoint name " + this.$vuetify.breakpoint.name);
    console.log(this.show);
  },
  computed: {
    imageHeight () {
     switch (this.$vuetify.breakpoint.name) {
       case 'xs': return '450px';
       case 'sm': return '500px';
       case 'md': return '500px';
       case 'lg': return '540px';
       case 'xl': return '540px';
     }
   }
  }
};

acdcjunior · Accepted Answer · 2018-03-24 21:48:18Z

2

Your logic is correct, try:

  methods: {
    hideMe() {
     if(this.$vuetify.breakpoint.name == 'xs') {
        console.log("When is this rendered? " + this.$vuetify.breakpoint.name == 'xs');
        this.show = "none";
     }
   }
  },
  mounted() {
    this.hideMe();
    console.log("This is a breakpoint name " + this.$vuetify.breakpoint.name);
    console.log(this.show);
  },

Note: The statement:

 console.log("When is this rendered? " + this.$vuetify.breakpoint.name == 'xs');

Will simply print false because it is working like

 console.log( ("When is this rendered? " + this.$vuetify.breakpoint.name) == 'xs');

Fix it adding ()s:

 console.log("When is this rendered? " + (this.$vuetify.breakpoint.name == 'xs'));

edited Mar 24, 2018 at 21:48

answered Mar 24, 2018 at 21:38

acdcjunior

136k37 gold badges341 silver badges312 bronze badges

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

3 Comments

ToddT Over a year ago

Wow.. I can't tell what the difference is! Ha.. what's the secret because it works!

acdcjunior Over a year ago

I made a new note in the answer. Another problem. Ah, and the problem with the "hideme" function is that you were calling this.hideme() and not this.hideMe() (notice the M)

acdcjunior Over a year ago

Hah, yeah... don't forget to take a break sometimes :D

Collectives™ on Stack Overflow

Vuejs function in mounted lifecycle hook

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related