Estoy construyendo un proyecto con Nuxt y necesito saber el tamaño de la envoltura para ajustar la configuración de la cuadrícula.
(Quiero una sola línea, aún podría hacer esto en CSS puro, probablemente ocultando los elementos)
Es la primera vez que uso la API de composición y la configuración de secuencias de comandos.
<script setup> const props = defineProps({ name: String }) const width = ref(0) const wrapper = ref(null) const maxColumns = computed(() => { if (width.value < 800) return 3 if (width.value < 1000) return 4 return 5 }) onMounted(() => { width.value = wrapper.value.clientWidth window.onresize = () => { width.value = wrapper.value.clientWidth console.log(width.value); }; }) </script> <template> <div class="category-preview" ref="wrapper"> ... </div> </template>El registro de la consola funciona correctamente, cambiar el tamaño de la ventana y actualizar la página devolverá 3, 4 o 5 según el tamaño, pero el cambio de tamaño no activará el cambio del valor calculado
Qué me estoy perdiendo ?
En mi entorno de prueba, tuve que cambiar el nombre de su referencia 'ancho' a otra cosa. Después de eso, funcionó para mí con un enfoque diferente usando un detector de eventos para cambiar el tamaño de los eventos.
Puedes hacer algo como esto:
<script setup> import { ref, onMounted, onUnmounted, computed } from 'vue' const wrapperWidth = ref(0) const wrapper = ref(null) // init component onMounted(() => { getDimensions() window.addEventListener('resize', debounce(() => getDimensions(), 250)) }) // remove event listener after destroying the component onUnmounted(() => { window.removeEventListener('resize', debounce) }) // your computed property const maxColumns = computed(() => { if (wrapperWidth.value < 800) { return 3 } else if (wrapperWidth.value < 1000) { return 4 } else { return 5 } }) // get template ref dimensions function getDimensions () { const { width } = wrapper.value.getBoundingClientRect() wrapperWidth.value = width } // wait to call getDimensions() // it's just a function I have found on the web... // there is no need to call getDimensions() after every pixel have changed const debounce = (func, wait) => { let timeout return function executedFunction (...args) { const later = () => { timeout = null func(...args) } clearTimeout(timeout) timeout = setTimeout(later, wait) } } </script> <template> <div ref="wrapper"> {{ maxColumns }} // will change after resize events </div> </template>