Tengo un problema bastante común al acceder a los datos mientras se carga la página, sin embargo, no puedo resolverlo.
Mi código es el siguiente:
computed: { nowPlaying() { if(this.$store.state.radio && !this.loading) { let meta = Object.values(this.apollo).filter(el => el.channel === this.activeChannel) this.title = meta[0].title, this.artist = meta[0].artist } },La recarga en caliente funciona como se esperaba, pero la recarga de la página devuelve un error indefinido tanto para el título como para el artista:
TypeError: no se pueden leer las propiedades de undefined (leyendo 'título') en VueComponent.nowPlaying (Player.vue?7cf3:45:1)
Esto sucede solo si trato de acceder a un elemento en la matriz meta usando [].
Parece que en la carga de la página, this.apollo o this.activeChannel no está disponible como propiedad computed siempre llama antes del enlace de mounted() .
¿Puede asegurarse de que this.apollo y this.activeChannel disponibles en la propiedad de datos o de mounted() ?
Demostración de cómo funciona :
new Vue({ el: '#app', data() { return { property: 'Example property' } }, computed: { propertyComputed() { console.log('computed'); // Called first on page load } }, mounted() { console.log('mounted'); } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div>{{ propertyComputed }}</div> </div>