I am facing an issue with setting the margin of an image to display it in the center of the page when the image dialog is created. I have calculated the margin in the component's created method and everything seems fine during debugging as the image is positioned correctly after using my jquery margin set method. However, as I continue debugging, the component is somehow rerendered without accessing the created method again, resulting in the image margin not being set. This situation occurs whenever I try to set a variable in the created method as the component frequently rerenders without going into the created block. Is there any solution to prevent this continuous rerendering? It is quite frustrating.
This is the code snippet from 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 :
To address this issue, I found a solution by utilizing the v-bind:style attribute to set the margin and retrieving 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
}
}
However, the problem persists in another component where the template style is initially set to 'display: none'. Upon clicking a button, I want to display the component by changing its style to 'display: block' in both the created and updated methods. Despite showing up briefly after the $.show method at the end of the created block, the component gets rerendered and disappears without accessing the created or updated block. How can I resolve this issue?