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.

Vue2 obtén el ancho del span y asigna una clase basada en ese ancho.

28 Jul, 2023 Programación

Tengo este li:

<li v-for="(row, index) in onceItems" :key="row.product.ID">
    <span class="title" ref="title" :class="{ max: getTitleWidth(index) > 200 }">
        {{row.product.post_title}} 
    </span>
</li>

Quiero dar la clase “max” si el elemento tiene más de 200px (detectar títulos largos)

methods: {
    getTitleWidth: function(index) {
        this.$nextTick(() => {
            let width = this.$refs.title[index].clientWidth;
            console.log(width);
            return width
        })
    },
}

La consola log retorna el valor correcto, pero no se le da la clase. Creo que tiene algo que ver con nextTick, pero sin él obtengo un valor indefinido.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución para detectar títulos largos y agregar la clase “max” usando Vue.js

    Para agregar la clase “max” al elemento span si el ancho del título es superior a 200px, podemos utilizar un método llamado getTitleWidth que se llamará cada vez que el bucle v-for itere a través de un elemento en la matriz onceItems.

    Aquí está el código actualizado para el elemento li:

    <li v-for="(fila, index) in onceItems" :key="fila.product.ID">
  <span class="title" ref="title" :class="{ max: getTitleWidth(index) > 200 }">
    {{fila.product.post_title}} 
  </span>
</li>

    Aquí hemos agregado una vinculación de clase condicional al elemento span. La clase se agregará si el valor de retorno del método getTitleWidth es mayor que 200.

    Sin embargo, la implementación actual del método getTitleWidth no es correcta, ya que está devolviendo undefined. Esto se debe a que el método $nextTick es asíncrono y no devuelve un valor de inmediato.

    Para resolver este problema, podemos utilizar una Promise para esperar a que se complete el siguiente ciclo y luego resolver la promesa con el ancho del título. Aquí está el código actualizado para el método getTitleWidth:

    methods: {
  getTitleWidth(index) {
    return new Promise((resolve) => {
      this.$nextTick(() => {
        let width = this.$refs.title[index].clientWidth;
        resolve(width);
      });
    });
  },
},

    Aquí, hemos envuelto la llamada al método $nextTick en una Promise y la hemos resuelto con el ancho del título una vez que se complete el ciclo.

    Ahora, la vinculación de clase debería funcionar correctamente y agregar la clase “max” al elemento span si el ancho del título es superior a 200px.

Comments are closed.