Question

我正在阅读Vuejs documentation，可以说它令人困惑。在没有运行示例或没有示例的完整示例的情况下，我试图了解有关使用一个道具而不是对每个属性使用每个道具的知识。我正在尝试从文档中举一个例子，但我不能。以下是我的代码。

Vue.component('blog-post', {
    props:['post'],
    template:`
    <div class="blog-post">
    <h3>{{ post.title }}</h3>
  </div>  
    `
})
new Vue({
    el : '#app',
    data: {

    }
})

HTML

<div id="app">
        <blog-post
        v-for="post in posts"
        v-bind:key="post.id"
        v-bind:post="post"
      ></blog-post>
</div>

我得到的错误是“ [Vue警告]：属性或方法“ posts”未在实例上定义，但在渲染期间被引用”。我很困惑如何使用一个值来显示许多对象。

Answer 1

props：['post']检查此复数。我认为您正在将一系列帖子传递给组件，并且在组件内部对其进行迭代。

Answer 2

您需要顶部通过数据。

Vue.component('blog-post', {
    props:['post'],
    template:`
    <div class="blog-post">
    <h3>{{ post.title }}</h3>
  </div>  
    `
})
new Vue({
    el : '#app',
    data: {
        posts: [
            {
                title:  'post-1' 
            },
            {
                title:  'post-2' 
            },
            {
                title:  'post-2' 
            }   
        ]
    }
})

现在

<blog-post
    v-for="post in posts"
    v-bind:key="post.id"
    v-bind:post="post"
></blog-post>

您可以使用v-for，它将获取posts数据并对其进行迭代，并将单个post传递给组件，并且组件将使用该属性并呈现html。

在这里blog-post会收到post时，它就是这个[ v-bind：post =“ post” ]

{
    title:  'post-1' 
}

，它将使用其post.title

v-因为它将迭代此blog-post组件[在我们的例子中为3次]，并将数组中的每个post object作为post组件的blog-post属性传递。

如有任何疑问，请发表评论。

Answer 3

不确定我是否理解这个问题，但我会尽力提供帮助：

出现错误的原因是因为您正在循环发布帖子，但尚未在任何地方定义它们，因此您需要更改主实例数据：

var myDic = new Dictionary<string,List<string>>()
List<string> myKeys = new List<string>() { "1", "2", "3"};
myKeys.ForEach(l => myDic.Add(l, new List<string>));

v-bind有一个简写，因此您可以编写：

new Vue({
    el : '#app',
    data: {
       posts: [{author: "someone", text: "something", title: "Some post"}]
    }
})

与一个道具一起使用组件

3 个答案: