Solo necesito ayuda para identificar por qué recibo un error en mi propiedad calculada. el error es:
Error in render: "TypeError: Cannot read property 'length' of undefined"Supongo que mientras estoy recorriendo activeConnect.nodes cuando hago referencia a this.node, ¿no sabe a cuál me refiero también? ¿Cómo arreglo mi computadora para hacer esto correctamente?
<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>Calculado:
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; }No hay this.node , node es un nombre local dentro v-for . Hay varias opciones para abordar esto.
nameClass puede ser un método que recibe node como parámetro.
Una parte de una plantilla que depende del valor del node ( v-card ) se puede mover a un componente separado que recibe el node como accesorio y se puede calcular nameClass de nombre.
Un cálculo simple como en nameClass se puede mover a una plantilla.