5

Estoy utilizando el framework de Vue, [Quasar].

Este es el error que muestra en consola:

[Vue warn]: Error in render: "TypeError: Cannot read property 'charAt' of undefined"

Este es mi código:

<template>
  <q-page class="flex q-pa-md">
    <q-list class="full-width" separator="">
      <q-item
        v-for="(user, key) in users"
        :key="key"
        to="/notes"
        clickable
        v-ripple
      >
        <q-item-section avatar>
          <q-avatar color="teal" text-color="white">
            {{ user.name.charAt(0) }}
          </q-avatar>
        </q-item-section>      
      </q-item>
    </q-list>
  </q-page>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  /* data() {
    return {
      users: [
        {
          id: 1,
          name: "Robert",
          online: true
        },
        {
          id: 2,
          name: "Sofia",
          online: false
        }
      ]
    };
  }, */
  computed: {
    ...mapGetters("store", ["users"])
  }
};
</script>

He probado enviando los valores desde un objeto [data] y me ha funcionado correctamente, sin embargo el valor viene desde un [store], en una propiedad [computed()], cuando lo envío desde ahí es cuando la página se pone en blanco y muestra el error inicial.

4
  • Lo has probado entre [0] en vez de poner entre ()
    – Janpweb
    Commented el 28 dic. 2019 a las 16:20
  • Sí, aún así no funciona, también he probado otros métodos para capturar la primer letra pero tampoco me han funcionado. Igual gracias por la sugerencia!
    – jsdnlb
    Commented el 28 dic. 2019 a las 16:23
  • El error es que claramente user no tiene una propiedad llamada name. Como obtienes el user? puedes imprimir el user por consola antes? Commented el 28 dic. 2019 a las 16:31
  • Si le quito charAt(0) me trae el nombre del usuario sin problema, pero necesito simplemente mostrar la primer letra.
    – jsdnlb
    Commented el 28 dic. 2019 a las 16:33

3 respuestas 3

5

El problema en realidad no se relaciona con Quasar sino con Vue o incluso Javascript, un error común es escribir chartAt con "t" (que significaría gráfico), en vez de charAt (que sería carácter).

En el siguiente ejemplo se muestra cómo debería funcionar normalmente

var app = new Vue({
  el: '#app',
  data: {
    user: {
      email: '[email protected]',
      name: 'Test'
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  Nombre de usuario: {{ user.name }} <br>
  Primera letra: {{ user.name.charAt(0) }}
</div>

Debes evaluar el valor que te está llegando y también cómo lo estás escribiendo.

Algo que se me ocurre es que la variable user no está disponible cuando empieza a ejecutarse el código, si es posible pon la variable dentro del elemento data o en la propiedad computed() en caso de que el valor venga desde un store.

Como última recomendación, valida que todos los elementos de tu objeto existan y que no haya un undefined.

3
  • He probado enviando los valores desde un objeto [data] y me ha funcionado correctamente, sin embargo el valor viene desde un [store], por lo que efectivamente está en una propiedad [computed()]
    – jsdnlb
    Commented el 28 dic. 2019 a las 17:18
  • ¿Puedes poner el código de tu JS? Commented el 28 dic. 2019 a las 17:46
  • Sí el efectivamente el problema era que habían datos que llegaban en undefined.
    – jsdnlb
    Commented el 28 dic. 2019 a las 19:48
4

Dependiendo del contenido de los datos y su origen , en determinados puntos del ciclo de vida del componente puedes operar sobre un valor indefinido o inválido.

En tu caso específico intentas obtener la inicial de un user

{{ user.name.charAt(0) }}

Lo cual presupone que la variable user (en este caso es el ítem de un array, pero esto es anecdótico porque un array vacío no entra en el bucle),

  • existe
  • es un objeto
  • tiene una propiedad name
  • la propiedad name es un string

En tu ejemplo con data

 data() {
    return {
      users: [
        { id: 1, name: "Robert"} ,  // ✓ cumple
        null, // no existe
        'juanito' // existe pero no es un objeto
        { id: 2 } // es un objeto pero no tiene propiedad name
        { id:3, name: []} // tiene name, pero éste no es un string 
        }
      ]
    };
  }

Como tu componente obtiene los datos del store

  computed: {
    ...mapGetters("store", ["users"])
  }

habría que ver cómo está inicializado. Por ejemplo:

const state = {
 users:[
   {id:null, name:null}
 ]
};

Explicaría que el array no esté vacío y sin embargo contenga un user inválido.

Una opción es poner un IF o varios en el template:

 <q-item-section avatar v-if="user && user.name && typeof user.name === 'string'">
    ...
 </q-item-section>

Otra opción es usar una propiedad calculada para filtrar la data o marshallizarla a esa estructura.

computed: {
  ...mapGetters("store", ["users"]),
  validUsers() {
     return (this.users || []).filter(user=>{
        return  typeof user === 'object');
     }).map(user=>{
        user.name = user.name || '';
       return user;
     })
   }
}

Pero eso es frágil, conlleva un acoplamiento innecesario y es confuso de mantener, para empezar si user es null ya pasa el filtro (misterios de JS). En rigor la comprobación debiera ser user.constructor === Object pero de nuevo, ese objeto puede venir de haber instanciado una clase User.... si el componente no sabe ni controla el origen de users es buscarse problemas.

Creo que es más práctico y fácil de mantener una coalescencia explicita en el template:

String(
   (
     user || {}  // coalescencia a objeto vacio
   ).name || '' // coalescencia a string vacio
).charAt(0) // esto siempre funciona

o sea

 <q-avatar color="teal" text-color="white">
        {{ String((user||{}).name||'').charAt(0) }}
 </q-avatar>

Con eso el componente sólo sabe lo mínimo de los datos, le da igual de donde vengan ni otros detalles de su estructura.

2

El string que mandas a la vista por medio de VueJS no deja de ser un elemento iterable; entonces debería bastar con indicar la posición a la cual deseas acceder de este modo:

{{ user.nombre[0] }}

De una estructura como la siguiente

        let app = new Vue({
          el: `#data`,
          data: {
            nombre: "algoMas"
          }
        })

Ahora si tus datos están dentro de un objeto dentro del principal que sería data de esta forma:

let app = new Vue({
  el: `#data`,
  data: {
    user: {
      nombre: "algo Mas"
    }
  }
})

Puedes accederlo de esta forma:

{{ user.nombre[0] }}

Con lo cual tendrás la letra a al indicar que del objeto iterable obtengas el elemento que esta en la posición 0 tal cual como si fuera un vector

2
  • He probado enviando los valores desde un objeto [data] y me ha funcionado correctamente, sin embargo el valor viene desde un [store], en una propiedad [computed()], cuando lo envío desde ahí es cuando la página se pone en blanco y muestra el error inicial.
    – jsdnlb
    Commented el 28 dic. 2019 a las 17:24
  • Convendría entonces agregues para ampliar y clarificar tu duda
    – user128299
    Commented el 28 dic. 2019 a las 17:26

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.