Vue Prop undefined for just the first item in v-for loop using a component

Question

I have a component that looks like this.

#this is the <review-stars> component
export default {                                                                                                                                                                                                                                             
    props: ['NumStars', 'RecipeName'],                                                                                                                                                                                                                       

    data() {                                                                                                                                                                                                                                                 
        return{                                                                                                                                                                                                                                              
            stars: this.NumStars,                                                                                                                                                                                                                            
            recipe: this.RecipeName,                                                                                                                                                                                                                         
        }                                                                                                                                                                                                                                                    
    },                                                                                                                                                                                                                                                       

    mounted () {                                                                                                                                                                                                                                             
    },                                                                                                                                                                                                                                                       
}                                               

It has a section as well, but things are find there.

I then have my html page that looks like this.

<recipe-selects inline-template>                                                                                                                                                                                                                             
<div>                                                                                                                                                                                                                                                        
        <table class='table table-striped'>                                                                                                                                                                                                                  
            <thead>                                                                                                                                                                                                                                          
            </thead>                                                                                                                                                                                                                                         
            <tbody>                                                                                                                                                                                                                                          

                <tr v-for="(item, index) in recipes" :key="index">                                                                                                                                                                                           

                    <td class=""><a v-bind:href="'/recipe/'+item.id+'/view'" v-text="item.title"></a></td>                                                                                                                                                   
                    <td>                                                                                                                                                                                                                                     

                    @{{item.overall_star}}                                                                                                                                                                                                                   
                    <review-stars :num-stars="item.overall_star" :recipe-name="item.title" >                                                                                                                                                                 
                    </review-stars>                                                                                                                                                                                                                          
                    </td>                                                                                                                                                                                                                                    
                </tr>                                                                                                                                                                                                                                        
            </tbody>                                                                                                                                                                                                                                         
        </table>                                                                                                                                                                                                                                             

</div>                                                                                                                                                                                                                                                       
</recipe-selects>       

I have a component attached to and that works fine. It is an ajax call that loads the data for the v-for and I get a listing of recipes back. It is an inline component.

But, then I have another component that attaches to where I try to bind some props and pass them to my component I showed above.

When the v-for loop runs, I get a list of all the recipes. I also get a list of the 'review-stars' appropriately.

EXCEPT for the very first item in the for loop.

Here is Vue Dev tools showing the first created ReviewStars instances shows data as undefined. But in this you see that the second (and any further rows, but I limited it here to just 2 results) work exactly as expected.

Both show that the actual props get defined and picked up. But the props are only passed to the data (stars and recipe) from the second v-for loop and onwards.

What am I missing to assign the data (stars and recipe) in the FIRST v-for loop?

Answer 1

The props are not there yet to populate the values in data. You have to wait for the created hook for everything to be ready and then you can use the values from props. You can use them directly from props. The only reason to duplicate them in data is if they are modified in this component.

export default {                                                                                                                                                                                                                                             
    props: ['NumStars', 'RecipeName'],                                                                                                                                                                                                                       
    data() {                                                                                                                                                                                                                                                 
        return{                                                                                                                                                                                                                                              
            stars: null,                                                                                                                                                                                                                            
            recipe: null,                                                                                                                                                                                                                         
        }                                                                                                                                                                                                                                                    
    },
    created () {
        this.stars = this.NumStars   
        this.recipe = this.RecipeName
    },                                                                                                                                                                                                                                                       
}