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.
user
no tiene una propiedad llamadaname
. Como obtienes el user? puedes imprimir el user por consola antes?