VueJS: Error when looping through data array with component

Question

New to VueJS, and trying to use v-for to loop through an array of objects and output the component multiple times, or really for as many objects as are in the array, but receiving the following error:

[Vue warn]: Property or method "posts" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in < Root>)

Code:

<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'
})

Neha · Accepted Answer · 2018-03-12 04:56:24Z

2

you have not defined posts in your #special-posts-container Vue object. you are passing a variable to another component without declaring it in current 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.'
         }
         ]
      }
  });

answered Mar 12, 2018 at 4:56

Neha

2,3115 gold badges27 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Salvar Over a year ago

I get this error when I make those changes: [Vue warn]: Property or method "username" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: vuejs.org/v2/guide/….

Salvar Over a year ago

The data is present when viewing through vue dev tools, but i still get that error and nothing is shown on the page.

Salvar Over a year ago

Ok, I defined them as props: ['username', 'content', 'date'] in the Vue.componet() and it worked.

Neha Over a year ago

yeah! you have to define it in props array.

Karan Over a year ago

Good catch @Neha.

|

Collectives™ on Stack Overflow

VueJS: Error when looping through data array with component

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related