vuefire computed props issues, looking for guidance. about vuefire HOT 6 CLOSED

I honestly don't know. I tried it in a fiddle based on the demo and it just works fine: https://jsfiddle.net/posva/r3ab21nm/

Maybe you can try fiddling around to see where the issue is coming from. If you find a bug, please tell me here or better off, open a new issue with the repro

from vuefire.

I think I was able to reproduce it with simpler code.
HTML
`

        <ul>
        <li v-for="team in teams">{{ team.name }}</li>
        </ul>
        
        <pre>
        {{ firstPlaceTeam.name }}
        </pre>
    </div>`

  var app = new Vue({
    
    el: '#app',
    data : function(){ return { news: [] }},
    firebase : {
    
        teams : teamsRef.limitToLast(7)
    
    },
    computed: {
        
        firstPlaceTeam  : function(){
            
            return this.teams[0];
            
        }
        
    }
    
    
    });`

from vuefire.

That's because of {{ firstPlaceTeam.name }} you need to check firstPlaceTeam first as it may be undefined: {{ firstPlaceTeam && firstPlaceTeam.name }}

from vuefire.

Thanks you.
Ill try my program tonight see if that's the culprit.

from vuefire.

@thedangler hi.. i think that is because the computed property is depending on the array populated by firebase. it looks like the computation is running too soon, before the firebase could finish fetching data.

@posva is it possible to include a optional doneCallback() callback, similar to cancelCallback? This doneCallback could be called after the async operations of firebase are completed and the properties in the vm are updated. This will be very useful to avoid issues like the above mentioned one. Also, it can be used to show status to user while loading the data from remote firebase server.

from vuefire.

hi.. i think that is because the computed property is depending on the array populated by firebase. it looks like the computation is running too soon, before the firebase could finish fetching data.

The array is synchronously initialised to an empty array

About the doneCallback, I want to add something similar but not the for the same reasons.

from vuefire.