Intento calcular el margen de una imagen para mostrarla en el centro de la página cuando se crea el cuadro de diálogo de la imagen. Calculo el margen en el método creado del componente y cuando depuro, veo que está posicionado correctamente después de mi método de configuración de márgenes de jquery. Pero cuando continué con la depuración, el componente se vuelve a renderizar de alguna manera sin entrar en el método creado y el margen de la imagen no se establece. Me encontré con esta situación todo el tiempo cuando trato de establecer alguna variable en el método creado y siempre vuelve a mostrarse sin entrar en el bloque creado . ¿Hay alguna manera de prevenir eso? Es realmente molesto.
Aquí está mi bloque creado:
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(); },ACTUALIZAR :
Resolví esto simplemente dando el atributo de margen con v-bind:style y obteniéndolo de una propiedad calculada como esta:
<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 } }Pero el problema continúa, en otro componente tenía su estilo de plantilla 'display: none' inicialmente. Después de hacer clic en un botón, quiero mostrarlo, así que configuré su estilo para 'mostrar: bloque' en los métodos creados y actualizados , pero nuevamente se muestra después del método $.show en el y del bloque creado pero los componentes se vuelve a renderizar y desaparece sin entrar en el bloque creado o actualizado. ¿Como puedo resolver esto?
el gancho created solo se llama una vez, debe aprovechar el gancho 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(); }, }, };Porque usa demasiado jQuery en la aplicación Vue.
La forma más rápida de resolver su problema es simplemente forzar la renderización de esta manera.
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++; }, }, };