When I navigate to a view from another view, I pass the itemId as a param value to vue router.
My goal is to call firebase with that itemId in order to filter the data and use the filtered result/data in the UI. Specifically, I am utilizing vuefire.
The issue arises when Vue begins rendering before the data becomes available in the created() method, leading to an error in the console stating that the view refers to an undefined property values.
Is there a way to delay rendering the view until the data is accessible?
I have attempted using both beforeMount, created, and beforeCreate methods without success.
Here is the problematic code snippet:
<h1>{{projects[0].project_name}}</h1> //type error - cannot read property 'project_name' of undefined. It sometimes works on refresh but mostly does not.
Below is the script portion of the code:
let projectsRef = db.ref('projects');
export default {
name: 'ProjectDetailsOpenInvesting',
props: {
data: Object
},
firebase:{
projects: projectsRef
},
data(){
return {
projects:[],
.....
}
},
created(){
var that = this;
console.log(this.$route.params.itemid) //this works
this.projects = this.projects.filter(function(p){
return p.project_id == that.$route.params.itemid //this works as well
})
}