Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

95
Vistas
Computed property referencing wrong 'this' when trying to add a class depending on the character length in Vue

I just need some help identifying why I get an error on my computed property. The error is:

Error in render: "TypeError: Cannot read property 'length' of undefined"

I assume as I am looping through activeConnect.nodes when I reference this.node it does't know which one I am referring too? How do I fix my computed to do this correctly?

   <v-col
      v-for="(node, index) in activeConnect.nodes"
      :key="index"
    >
      <v-card
        flex
        @click="edit(node)"
      >
        <v-card-text
          :class="nameClass"
          text-no-wrap
          v-text="node.content"
        />
      </v-card>
    </v-col>

Computed:

  computed: {
    nameClass () {
      if (this.node.content.length > 4) {
        return 'name-small'
      }
      return 'name'
    }
  }

SCSS:

.name-small {
  font-size: 12px !important;
}

.name {
  font-size: 20px !important;
}
over 4 years ago · Santiago Trujillo
1 Respuestas
Responde la pregunta

0

There's no this.node, node is local name inside v-for. There are several options to address this.

nameClass can be a method that receives node as parameter.

A part of a template that depends on node value (v-card) can be moved to a separate component that receives node as a prop and can have nameClass computed.

A simple calculation like in nameClass can be moved to a template.

over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda