this.$refs.pagination is undefined after filtering

[romanesko]

When filtered result fits in one page — the pagination block disappears. After filter reset this.$refs.pagination is undefined

onPaginationData (paginationData) {
    this.$refs.pagination.setPaginationData(paginationData) // <-- Cannot read property 'setPaginationData' of undefined"
    this.$refs.paginationInfo.setPaginationData(paginationData)
}

[ratiw]

Sorry, but I can't seem to reproduce the error you mentioned. Did you modify your code to be different than the tutorial?

[romanesko]

I've just cloned it into another folder with no changes from repo and it has the same behaviour:

Here is the screencast: http://take.ms/wIMFZ

[ratiw]

@romanesko Just tried it yesterday and still working fine. Can you please try deleting the node_modules and reinstall using npm install and try again?

[romanesko]

I've just done it — same result (

[ratiw]

Just try it again and it's still working fine. I wonder what went wrong in your case!

Did you follow along or just clone from the tutorial repo? What browser do you use?

[romanesko]

Just clone. the same behaviour in Opera and Chrome and Safari.

When rows fits in to one page, the this.$refs.pagination goes to undefined, I guess it shouldn't? Should be just hidden?

[ratiw]

Nope, that's not the problem. That is that expected behavior of v-if. It doesn't matter if you switch to use v-show, it would still working and not error like you've shown. I just don't know what the problem is.

Vuetable-2 has been tested with Chrome, Safari, and Edge and they are all work fine because of the Virtual DOM in Vue 2.

Out of curiosity, I've seen in your screencast, what is xhr.js?

[ratiw]

There seems to be some problem with webpack or vue-loader. I just delete everything and reclone the tutorial repo, somehow can no long compile it. Will have to check and get back to you again. Sorry.

[romanesko]

It compiles after npm install babel-preset-env --save-dev

xhr.js — it's a helper built in the browser, it appears if I turn on Log XMLHttpRequests in the browser console

[romanesko]

I guess this issue is the same as https://github.com/ratiw/vuetable-2/issues/252

[ratiw]

This has been fixed in v1.6.6 of Vuetable-2. Please see the release note here.

Thanks for sticking around and report this issue. :)

[romanesko]

👍 Thank you!)

[Traskhy]

I can´t install vuetable-2 1.6.6 to fix the commented issue. when i do npm install vuetable-2 --save-dev in terminal, it installs 1.6.5....how could i upgrade to .6.6? Thank you so much!