如何避免Vue js 2组件中的对象引用问题？

Question

我在学习Vue，无法理解一件事。我一直得到这个错误：

属性或方法“item”没有在实例上定义，但在渲染过程中被引用。通过初始化属性，确保此属性在数据选项或基于类的组件中处于反应状态。参见：https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。

很显然，我阅读了文章并思考了我的代码，但由于我使用了Vue的push（）方法（它应该这样做），我仍然无法理解它为什么不起作用。有人可以在这方面点亮一些灯吗？

我下面分享一些代码：

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> 

Answer 1

分量模板引用item但item未声明为在任何地方组件的属性。

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

相反，组件声明一种newsdata属性。我期望你想要的是这样的：

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

下面是代码（稍微修改，以便API调用工作）。

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/vue@2.4.2"></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>