javascript - 仅针对使用组件的 v-for 循环中的第一项未定义 Vue Prop

Question

我有一个看起来像这样的组件。

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

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

    mounted () {                                                                                                                                                                                                                                             
    },                                                                                                                                                                                                                                                       
}                                               

它也有一个部分，但东西都在那里找到。

然后我的 html 页面看起来像这样。

<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>       

我连接了一个组件并且工作正常。这是一个 ajax 调用，加载 v-for 的数据，我得到了食谱列表。它是一个内联组件。

但是，然后我有另一个组件附加到我尝试绑定(bind)一些 Prop 并将它们传递给上面显示的组件的位置。

当 v-for 循环运行时，我会得到所有食谱的列表。我还相应地获得了“评论明星”列表。

除了 for 循环中的第一项。

这里是 Vue 开发工具，显示第一个创建的 ReviewStars 实例显示数据未定义。 但在这里您会看到第二行(以及任何其他行，但我在这里将其限制为只有 2 个结果)完全按照预期工作。

两者都表明实际的 props 已被定义并被拾取。但 Prop 仅从第二个 v-for 循环开始传递给数据(星星和配方)。

在第一个 v-for 循环中分配数据(星星和配方)时我缺少什么？

Answer 1

props 尚未填充 data 中的值。您必须等待 created Hook 让一切准备就绪，然后您就可以使用 props 中的值。您可以直接从 props 使用它们。在 data 中复制它们的唯一原因是它们在此组件中被修改。

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