Question

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

h(x) = h(x')

它也有一个部分，但是在那里找到了

然后我的html页面如下所示。

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

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

    mounted () {                                                                                                                                                                                                                                             
    },                                                                                                                                                                                                                                                       
}

我附加了一个组件，并且工作正常。这是一个ajax调用，它为v-for加载数据，然后我得到配方列表。这是一个内联组件。

但是，然后，我有另一个组件连接到我试图绑定一些道具并将其传递给我上面显示的组件的地方。

当v-for循环运行时，我会得到所有配方的列表。我还会适当地获得“评论之星”列表。

除了for循环中的第一项。

以下是Vue Dev工具，显示了第一个创建的ReviewStars实例，该实例将数据显示为未定义。但是在这种情况下，您会看到第二个（以及任何其他行，但我仅将其限制为两个结果）完全按预期工作。

这两个都表明实际的道具已定义并拾取。但是道具只会从第二个v-for循环开始传递给数据（星号和配方）。

在第一个v-for循环中分配数据（星号和配方）会丢失什么？

Answer 1

<div class="member-details"> <div class="member2 clearfix "> <figure> <img src="http://server.com/bar/image01.png" class="member-image" width="222" height="222"> </figure> <div class="overlay4"> <div class="overlay3"> <h5><a href="http://server.com/bar/fgh/">Sr. Advocate </a></h5> <p><a href="http://server.com/bar/fgh/">fgh</a></p> </div> </div> </div> <div class="member1 "> <figure> <img src="http://server.com/bar/image03.png" class="member-image" alt="" width="222" height="222"> </figure> <div class="overlay4"> <div class="overlay3"> <h5><a href="http://server.com/bar/abc/">Advocate </a></h5> <p><a href="http://server.com/bar/abc/">abc</a></p> </div> </div> </div> <div class="member1 "> <figure> <img src="http://server.com/bar/image02.png" class="member-image" alt="" width="222" height="222"> </figure> <div class="overlay4"> <div class="overlay3"> <h5><a href="http://server.com/bar/xyz/">Advocate Member</a></h5> <p><a href="http://server.com/bar/xyz/">XYZ</a></p> </div> </div> </div> </div>尚未填充props中的值。您必须等待data钩子才能准备就绪，然后才能使用created中的值。您可以直接从props使用它们。在props中复制它们的唯一原因是如果在此组件中对其进行了修改。

data

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

1 个答案: