CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-component
cuneyttyler
cuneyttyler

Reputation: 1365

Vue component gets recreated after created method

I try to calculate the margin of an image to show it in the center of the page when the image dialog is created. I calculate the margin in the component's created method and when I debug, I see that it is positioned correctly after my jquery margin set method. But when I continued the debug, the component is somehow rerendered without going into the created method and the margin of the image doesn't get set. I came accross this situation all the time when I try to set some variable in the created method and it always rerenders without going into the created block. Is there any way to prevent that? It is really annoying.

Here is my created block :

async created() {
    let self = this;

    $('.vodal.image-dialog').css('cursor', 'wait');

    $('.vodal.image-dialog').css('cursor', 'default');
    var margin = $(window).width() / 2 - $(".vodal.image-dialog .pop-up img").width() / 2;
    $(".vodal.image-dialog img").css('margin-left', margin);
    $(".vodal.image-dialog .pop-up img").show();

  },

UPDATE :

I solved this by simply giving the margin attribute with v-bind:style and get it from a computed property like this :

<img v-if="isEntitySaved()" v-bind:style="{'margin-left': margin + 'px'}"
      v-bind:src="image" class="blurred"/>
...
computed: {
    margin: function() {
      var imgClass = ''
      if(this.source == 'detail-main')
        imgClass = ".vodal.image-dialog .pop-up .main-image img"
      else
        imgClass = ".vodal.image-dialog .pop-up .side-image img"

      return $(window).width() / 2 - $(".vodal.image-dialog .pop-up ." + this.source + " img").width() / 2
    }
  }

But the problem continues, in another component I had it's template style 'display: none' initially. After some button is clicked, I want to show it so I set its style to 'display: block' in the created and updated methods, but again it gets displayed after the $.show method at the and of the created block but the components gets rerendered and disappears without going into the created or updated block. How can I solve this?

Upvotes: 1

Views: 129

Answers (1)

Joseph
Joseph

Reputation: 4725

created hook only gets's called once, you need to leverage the updated hook.

export default {
  created() {
    this.updateStyle();
  },
  updated() {
    this.updateStyle();
  },
  methods: {
    updateStyle() {
      let self = this;

      $(".vodal.image-dialog").css("cursor", "wait");

      $(".vodal.image-dialog").css("cursor", "default");
      var margin =
        $(window).width() / 2 -
        $(".vodal.image-dialog .pop-up img").width() / 2;
      $(".vodal.image-dialog img").css("margin-left", margin);
      $(".vodal.image-dialog .pop-up img").show();
    },
  },
};

Update

Because you use too much jQuery in Vue app.

The fastest way to solve your problem is simply force re-render like this

export default {
  data() {
    return {
      count: 0,
    };
  },
  updated() {
    // updated will guarantee to be called if you modify this.count
  },
  methods: {
    doSomething() {
      // do what ever you want
      // .......
      // At the end, make sure to call this
      this.count++;
    },
  },
};

Upvotes: 1

Related Questions