Question

VueJS的新手，并试图使用v-for循环遍历一个对象数组并多次输出该组件，或者实际上是为了与数组中的对象一样多，但收到以下错误：

[Vue警告]：财产或方法＆＃34;帖子＆＃34;未在实例上定义   但在渲染期间引用。确保此属性是   无论是在数据选项中，还是在基于类的组件中，都是反应性的   初始化财产。看到：   https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties

（在＆lt; Root＆gt;中找到）

代码：

<section id="special-posts-container" class="container">

 <special-posts
      v-for="post in posts"
      :post="post"
      :key="post.id"
      :username="post.username"
      :content="post.content"
      :date="post.date">
  </special-posts>

</section>

Vue.component('special-posts', {
  template: `
    <div class="special-item-container">
      <div class="special-item special-name">{{username}}</div>
      <div class="special-item special-post">
        <a href="{{url}}">{{content}}</a>
      </div>
      <div class="special-item special-date">{{date}}</div>
    </div>`,
  data() {
    return {
      posts: [
        {
          id: 1,
          username: 'rusty',
          date: '03/11/18',
          content: 'Some interesting words.'
        },
        {
          id: 2,
          username: 'adelle',
          date: '03/12/18',
          content: 'Some uninteresting words.'
        }
      ]
    }
  }
})

const vm = new Vue({ 
  el: '#special-posts-container'
})

Answer 1

您尚未在＃special-posts-container Vue对象中定义帖子。您正在将变量传递给另一个组件而不在当前Vue中声明它。

const vm = new Vue({ 
  el: '#special-posts-container'
  data:{ 
          *********define posts here ****
       posts: [
         {
           id: 1,
           username: 'rusty',
           date: '03/11/18',
           content: 'Some interesting words.'
         },
         {
           id: 2,
           username: 'adelle',
           date: '03/12/18',
           content: 'Some uninteresting words.'
         }
         ]
      }
  });

VueJS：使用组件循环数据数组时出错

1 个答案: