Level 16
What happens if outside of your <pagination .....> block you just display the paginatedData.current_page value in <pre> tags?
Apr 23, 2017
5
Level 8
Vue 2 Component in Component, Prop Wrong Type
I'm writing a component inside a component. The inner component is a very basic paginator. My goal is to do something like this in the pagination control:
<pagination :current-page="10"
:page-count="100"
:visible-pages="5"
@page-clicked="onPageClicked"
></pagination>
In my Pagination.vue file, I have my currentPage prop defined as follows:
export default {
props: {
currentPage: {
type: Number,
required: true
},
When I call the component as described above, with a constant "10" going into current-page, everything works fine.
However... I'm using a Laravel Eloquent Model to generate a paginated result set through axios and I want to pass that result's current_page value into my <pagination :current-page... property, so I try to run code that looks like this:
<pagination :current-page="paginatedData.current_page"
:page-count="100"
:visible-pages="5"
@page-clicked="onPageClicked"
></pagination>
When I use the Chrome Vue tool to inspect $vm0.paginatedData.current_page (which correlates to my parent container), I see that its value is 1. A number. Everything should be awesome, right?
Wrong. I get this error instead:
app.js:1205 [Vue warn]: Invalid prop: type check failed for prop "currentPage". Expected Number, got Undefined.
(found in <Pagination> at D:\mydocs\thc\webroot\helpdesk\resources\assets\js\components\Pagination.vue)
What am I doing wrong?
Level 8
So I was going to say that when I changed the name of the tag to <xpagination> so Vue wouldn't process it, I saw the value from the current_page property in the tag in Chrome. Because I did that before I posted the OP but forgot to mention it.
But now, it seems like my parent control is being cached somewhere. I had a console.log() in its mounted event, so I changed it. I'm still getting the previous message.
I've tried an npm build dev and an npm build watch and they tell me they're working, but the behavior doesn't change. I deleted public/js and public/css and tried again, no change.
Seems like I need to figure out why and how this Vue component is being cached.
Level 8
So I busted my cache php artisan cache:clear and the right console message started showing up.
<pre>Current Page: {{ paginatedData.current_page }}</pre>
yields
<pre>Current Page: 1</pre>
However, when I do this:
<pagination :current-page="paginatedData.current_page"
:page-count="paginatedData.last_page"
:visible-pages="5"
@page-clicked="onPageClicked"
></pagination>
I get this:
app.js:3126 [Vue warn]: Invalid prop: type check failed for prop "pageCount". Expected Number, got Undefined.
(found in <Pagination> at D:\mydocs\thc\webroot\helpdesk\resources\assets\js\components\Pagination.vue)
Level 8
After more testing and no code changes, it actually does work. I seem to get those warning messages as the page loads for some reason. By the time it gets the data from the RESTful service, everything starts working.
Level 8
And to finalize the answer to my own question, yes they are only warnings, not errors, and you can get rid of them by ensuring you have data to process first, like so:
<pagination v-if="paginatedData.current_page"...
That's always set if I need to paginate, so I'll only include the tag if it's set.
Cool.
Old coders can learn new tricks. It's just a painfully slow process.
1 like
Please or to participate in this conversation.