es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Vue3 API de Composición: El valor computado no se está actualizando.

23 Jul, 2023 Programación

Estoy construyendo un proyecto con Nuxt y necesito saber el tamaño del contenedor para ajustar la configuración de la cuadrícula.

(Quiero una sola línea, esto podría hacerlo solo con CSS probablemente ocultando los elementos)

Es la primera vez que uso la API de composición y la configuración del script.

<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 dependiendo del tamaño, pero cambiar el tamaño no activará el cambio en el valor calculado.

¿Qué me estoy perdiendo?

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    En el código proporcionado, la propiedad calculada maxColumns no reacciona a los cambios en la referencia width. Esto se debe a que las propiedades calculadas solo se actualizan cuando sus dependencias cambian y, en este caso, la referencia width no es una dependencia directa de maxColumns.

    Para solucionar esto, puedes hacer que width sea una dependencia de maxColumns pasándolo como argumento a la función calculada:

    const maxColumns = computed(() => {
  if (width.value < 800) return 3
  if (width.value < 1000) return 4
  return 5
})

    Con este cambio, cualquier actualización en la referencia width provocará una recomputación de maxColumns.

Comments are closed.