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>