Estoy tratando de crear una pequeña aplicación vue que modifique un div hello world cuando se cambia el tamaño de la pantalla.
Monté un oyente en el componente que escucha el cambio de tamaño de la ventana gráfica. Si la ventana gráfica cambia, llama a una función que modifica hello world div, modifyTargetDiv() .
En modifyTargetDiv() , uso this.$nextTick que no es correcto ya que esta palabra clave no espera a que el componente termine de volver a renderizarse. Por lo tanto, a veces obtengo referencias que aún no se han renderizado y otras referencias de tiempo renderizadas . Mi pregunta es cuál es la función vue correcta que siempre me da referencias renderizadas . Gracias.
Nota: He buscado en el gancho vue actualizado (), pero el cambio de tamaño de la ventana gráfica no lo activa. Además, el gancho montado () solo se ejecuta una vez cuando el componente se procesa por primera vez, por lo que no funcionará con el cambio de tamaño de la ventana gráfica.
<template> <div ref="target"> Hello world </div> </template> <script> mounted() { window.addEvenListener('resize', this.modifyTargetDiv); }, methods: { modifyTargetDiv() { this.$nextTick(() => { if (this.$refs.target == null) { console.log(`refs hasn't rendered yet`); } else { console.log('refs rendered'); // do something with the div // this.$refs.target.getHeight() } }); } } </script>Hay un par de errores aquí. Primero, está escuchando usando la función modifyTarget mientras declara la función como modifyTargetDiv . En segundo lugar, el nombre de la función es $nextTick y no $nexttick .
Además, está pasando la function a $nextTick en lugar de pasar la función de flecha . El puntero this de la función tradicional apuntaría al objeto de ventana global. La función de flecha conservará this puntero en su función de devolución de llamada.
this.$nextTick(() => { console.log(this.$refs.target); });