How can I avoid objects reference issues in in Vue js 2 components?

Question

I'm learning Vue and can't understand a thing. I keep getting this error:

Property or method "item" 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.

Obviously I read the article and thought about my code, but since I'm using Vue's push() method (which should do the thing), still I cann't understand why it doesn't work. Can someone shed some lights on this please?

I share some code below:

var maxpages = parseInt(rest_object.maxpages);

Vue.component('news-item', {
  template: '#news-template'
  ,props:['newsdata']
})

var news_manager = new Vue({
  el: '#more-news-box'
  ,data:{
    page: 1 
    ,add_more_button: null
    ,items: []
  }
  ,mounted: function(){
    this.add_more_button = $('button.add-more');
    
  }
  ,methods: {
    get_posts: function(){
      this.page += 1;
      if(this.page > maxpages) return false;
      if(this.page == maxpages) this.add_more_button.prop('disabled','disabled').addClass('hidden');

      $.ajax({
        type: 'GET'
        ,dataType: 'json'
        ,url: rest_object.api_url
        ,data: { per_page: 3 ,page: this.page }
      }).done(function(posts_objects) {
        _.each(posts_objects, function(post){ this.items.push(post); }.bind(this));
      }.bind(this));
    }
  }
});

HTML:

<div class="more-news-box" id="more-news-box">
  <ul><li v-for="(item, index) in items" is="news-item" :key="index" :newsdata="item"></li></ul>
  <button class="add-more" type="button" @click="get_posts">add more</button>
</div>


<script type="text/x-template" id="news-template">
  <li>
    <article class="news-article">
      <figure class="news-figure"></figure>
      <div class="news-date news-component"></div>
      <h3 class="news-title news-component">{{ item.title.rendered }}</h3>
      <div class="news-content news-component"></div>
    </article>
  </li>
</script>

Bert · Accepted Answer · 2017-10-28 15:15:21Z

The component template references item but item is not declared as a property anywhere in the component.

<h3 class="news-title news-component">{{ item.title.rendered }}</h3>

Instead, the component declares a newsdata property. I expect what you want is this:

<h3 class="news-title news-component">{{ newsdata.title.rendered }}</h3>

Here's the code (slightly modified so the API call works).

console.clear()

var maxpages = 10

Vue.component('news-item', {
  template: '#news-template'
  ,props:['newsdata']
})

var news_manager = new Vue({
  el: '#more-news-box'
  ,data:{
    page: 1 
    ,add_more_button: null
    ,items: []
  }
  ,mounted: function(){
    this.add_more_button = $('button.add-more');

  }
  ,methods: {
    get_posts: function(){
      this.page += 1;
      if(this.page > maxpages) return false;
      if(this.page == maxpages) this.add_more_button.prop('disabled','disabled').addClass('hidden');

      $.ajax({
        type: 'GET'
        ,dataType: 'json'
        ,url: "https://swapi.co/api/people"
        ,data: { per_page: 3 ,page: this.page }
      }).done(function(posts_objects) {
        console.log(posts_objects)
        _.each(posts_objects.results, function(post){ this.items.push({title:{rendered:post.name}}); }.bind(this));
        console.log(this.items)
      }.bind(this));
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]"></script>

<div class="more-news-box" id="more-news-box">
  <ul><li v-for="(item, index) in items" is="news-item" :key="index" :newsdata="item"></li></ul>
  <button class="add-more" type="button" @click="get_posts">add more</button>
</div>


<script type="text/x-template" id="news-template">
  <li>
    <article class="news-article">
      <figure class="news-figure"></figure>
      <div class="news-date news-component"></div>
      <h3 class="news-title news-component">{{ newsdata.title.rendered }}</h3>
      <div class="news-content news-component"></div>
    </article>
  </li>
</script>

Ok yes, among all, the thing is {{ newsdata.title.rendered }}, that solved the issue. Thank you very much!

Collectives™ on Stack Overflow

How can I avoid objects reference issues in in Vue js 2 components?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related