Я пытаюсь рассчитать поля изображения, чтобы показать его в центре страницы при создании диалогового окна изображения. Я вычисляю маржу в созданном методе компонента, и когда я отлаживаю, я вижу, что она расположена правильно после моего метода набора маржи jquery. Но когда я продолжил отладку, компонент каким-то образом перенаправляется без перехода в созданный метод, и поле изображения не устанавливается. Я постоянно сталкивался с такой ситуацией, когда пытался установить какую-либо переменную в созданном методе, и она всегда повторялась, не заходя в созданный блок. Есть ли какой-нибудь способ предотвратить это? Это действительно раздражает.

Вот мой созданный блок :

 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();

  },
 

Обновить :

Я решил эту проблему, просто указав атрибут margin с помощью v-bind:style и получив его из вычисляемого свойства, подобного этому :

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

Но проблема сохраняется, в другом компоненте у меня изначально был стиль шаблона «отображение: нет». После нажатия какой-либо кнопки я хочу показать ее, поэтому я установил для нее стиль «отображать: блок» в созданных и обновленных методах, но снова она отображается после метода $.show в и созданного блока, но компоненты перенаправляются и исчезают, не заходя в созданный или обновленный блок. Как я могу решить эту проблему?

created крючок вызывается только один раз, вам нужно использовать updated крючок.

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

Обновить

Потому что вы используете слишком много jQuery в приложении Vue.

Самый быстрый способ решить вашу проблему-просто принудительно выполнить повторный рендеринг, как это

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