Vue.jsは小道具を介してコールバックを渡します。

Question

私はこのようになりますコンポーネント持っている：^ことを私が使用して別のコンポーネントで

<template> 
    <div> 
     <pagination class="center" :pagination="pagination" :callback="loadData" :options="paginationOptions"></pagination> 
    </div> 
</template> 

<script> 
    import Pagination from 'vue-bootstrap-pagination'; 

    export default { 
     components: { Pagination }, 

     props: ['pagination', 'loadData'], 

     data() { 
      return { 
       paginationOptions: { 
        offset: 5, 
        previousText: 'Terug', 
        nextText: 'Volgende', 
        alwaysShowPrevNext: false 
       } 
      } 
     } 
    } 
</script> 

を：

<template> 
    <pagination :pagination="pagination" :callback="loadData" :options="paginationOptions"></pagination> 
</template> 

<script> 
export default { 
    loadData() { 
     this.fetchMessages(this.pagination.current_page); 
    } 

    //fetchMessages 
} 
</script> 

しかし、私はエラーが表示されます。

Invalid prop: type check failed for prop "callback". Expected Function, got Undefined. 
(found in component <pagination>) 

がそれですコールバックを渡すにはVue.js 2.0ではできませんか？

Answer 1

私はあなたの第二成分は正確に書かれたことがないかもしれないと思う、あなたのloadDataコールバックはmethodsにする必要があります：

<template> 
    <pagination :pagination="pagination" :callback="loadData" :options="paginationOptions"></pagination> 
</template> 

<script> 
export default { 
    methods: { 
    loadData() { 
     this.fetchMessages(this.pagination.current_page); 
    } 
    } 
} 
</script>