ヴュー2 - 私はVueののメインインスタンスを、次のしている1つのテンプレートで適切に動作し、別の

Question

では正常に動作していない小道具：

let App = new Vue({ 

    el: '#app-container', 

    data: { 
     countries: [] 
    }, 

    created() { 
     this.getCountries() 
    }, 

    methods: { 

     getCountries() { 

      let self = this; 

      axios.get('/admin/countries') 
       .then(function (response) { 

        self.countries = response.data; 

       }) 
       .catch(function (error) { 
        console.log(error); 
       }); 

     }, 

     filterCountries(event) { 

      let name = event.target.value; 

      let self = this; 

      if(name.length > 2) { 

       axios.get('/country/search', { 
        params: { 
         name: name 
        } 
       }) 
       .then(function (response) { 
        self.countries = response.data; 
       }) 
       .catch(function (error) { 
        console.log(error); 
       }); 

      } 

      if((event.keyCode === 8 && name.length == 2) || !name.length){ 
       this.getCountries(); 
      } 
     }, 

     updateCountry(event) { 

      let parent = event.target.closest('.parent'); 

      let countryName = parent.getElementsByClassName('country-name')[0].value; 

      let countryOrder = parent.getElementsByClassName('country-order')[0].value; 

      axios.post('/country/insert', { 
       countryName: countryName, 
       countryOrder: countryOrder 
      }) 
      .then(function (response) { 
       console.log(response); 
      }) 
      .catch(function (error) { 
       console.log(error); 
      }); 


     } 
    } 

}) 

は、私が働いているこのテンプレートがあります。

Vue.component('country-list', { 
    template: ` 
    <tbody> 
     <tr is="country" v-for="country in countries.data"> 
      <td> 
       <input 
        type="text" 
        name="name" 
        class="form-control country-name" 
        :value="country.name" 
       > 
      </td> 
      <td>{{country.show? 'Yes' : 'No'}}</td> 
      <td> 
       <input 
        type="text" 
        name="order" 
        class="form-control country-order" 
        :value="country.order" 
       > 
      </td> 
      <td> 
       <button class="btn btn-primary">{{ country.show ? "Hide" : "Show" }}</button> 
       <button class="btn btn-success" 
        @click="updateCountry" 
        :data-id="country.id">Update</button> 
      </td> 
     </tr> 
    </tbody> 
    `, 

    props: ['countries'], 

    methods: { 

     updateCountry(event) { 

      let countryID = event.target.dataset.id; 

      let parent = event.target.closest('.parent'); 

      let countryName = parent.getElementsByClassName('country-name')[0].value; 

      let countryOrder = parent.getElementsByClassName('country-order')[0].value; 

      axios.post('/country/insert', { 
       id: countryID, 
       name: countryName, 
       order: countryOrder 
      }) 
      .then(function (response) { 
       console.log(response); 
      }) 
      .catch(function (error) { 
       console.log(error); 
      }); 

     } 

    } 
}); 

Vue.component('country', { 
    template: `<tr class=parent><slot></slot></tr>` 
}); 

を私は同じ小道具（国）で別のテンプレートを作成しようとしていますが、何も得られません（この場合、私は次のエラーがあります：

vendor.js:753 [Vue warn]: Error in render function: "TypeError: Cannot read property 'current_page' of undefined" 

found in 

---> <PaginationList> 
     <Root> 

）：テンプレートが使用されている

Vue.component('pagination-list', { 

    template: ` 
     <tfoot> 
      <tr> 
       <td>{{countries.current_page}}</td> 
      </tr> 
     </tfoot> 
    `, 

    props: ['countries'] 
}); 

HTMLコード：

<table class="table table-striped table-hover"> 

    <thead> 

     <tr> 
      <td> 
       <input 
        class="form-control" 
        type="text" 
        id="country-filter" 
        @keyup="filterCountries" 
        placeholder="Filter countries by name"> 
      </td> 
     </tr> 

     <tr> 

      <td>Country Name</td> 
      <td>Visible</td> 
      <td>Order</td> 
      <td>Actions</td> 

     </tr> 

    </thead> 

    <tbody is="country-list" :countries="countries"></tbody> 

    <tfoot is="pagination-list"></tfoot> 

</table> 

にconsole.log（self.countries）データ：あなたが合格されていません

Object {…} 
current_page:1 
data:Array(20) 
from:1 
last_page:13 
next_page_url:"http://smuvajse.app/admin/countries?page=2" 
path:"http://smuvajse.app/admin/countries" 
per_page:20 
prev_page_url:null 
to:20 
total:249 
__ob__:Observer 
get current_page:function reactiveGetter() 
set current_page:function reactiveSetter(newVal) 
get data:function reactiveGetter() 
set data:function reactiveSetter(newVal) 
get from:function reactiveGetter() 
set from:function reactiveSetter(newVal) 
get last_page:function reactiveGetter() 
set last_page:function reactiveSetter(newVal) 
get next_page_url:function reactiveGetter() 
set next_page_url:function reactiveSetter(newVal) 
get path:function reactiveGetter() 
set path:function reactiveSetter(newVal) 
get per_page:function reactiveGetter() 
set per_page:function reactiveSetter(newVal) 
get prev_page_url:function reactiveGetter() 
set prev_page_url:function reactiveSetter(newVal) 
get to:function reactiveGetter() 
set to:function reactiveSetter(newVal) 
get total:function reactiveGetter() 
set total:function reactiveSetter(newVal) 
__proto__:Object 

Answer 1

あなたのテンプレートを通して小道具：

<tfoot is="pagination-list"></tfoot> 

する必要があります：あなたはあなたの財産は、部品が実装されたときに、それはありませんので、 `V-if`を使用して存在しているかどうかを確認する必要があり、2番目のテンプレートで

<tfoot is="pagination-list" :countries="countries"></tfoot>