如何避免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>