Vue-material: [MdTable] md-table-empty-state appears even when the table is populated.

[mattgrande]

Steps to reproduce

1. Currently using vue 2.5.13, vue-material 1.0.0-beta-8, vuex 3.0.1
2. Create an md-table populated via vuex (code below) that includes an md-table-empty-state
3. Scroll to the bottom of the page
4. Despite there being data, the md-table-empty-state appears

Which browser?

Currently testing on OSX, Chrome 65.

What is expected?

The md-table-empty-state should only appear when there's no data.

What is actually happening?

The md-table-empty-state is always happening

Reproduction Link

https://codesandbox.io/s/y2wyporwr9

Edit: Reproduction repo here: https://github.com/mattgrande/md-empty-state-reproduce

[Samuell1]

Hey, we found out its not issue in vue-material but in codesandbox compiler. We are solving it with codesandbox devs. Thanks for issue!

For example here on Codepen it works: https://codepen.io/anon/pen/OvpyZL

[mattgrande]

So... I'm seeing it locally, which is why I opened the issue in the first place. So if you find out what the difference is between codesandbox and codepen, can you let me know?

[Samuell1]

@mattgrande depends on what version you using of vue, vue-template-compiler and vue-loader

[mattgrande]

My current dependencies:

"axios": "0.18.0",
"register-service-worker": "^1.0.0",
"vue": "^2.5.13",
"vue-class-component": "^6.0.0",
"vue-material": "1.0.0-beta-8",
"vue-property-decorator": "^6.0.0",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"

Do you see anything amiss there?

[Samuell1]

Can you check vue-template-compiler and vue-loader?

[mattgrande]

vue-template-compiler is at 2.5.15 and vue-loader is 14.2.1.

[Samuell1]

We using vue-loader 13.7.0. maybe thats the issue

[Samuell1]

@mattgrande What template you using from vue-cli?

[mattgrande]

vue-loader for me is coming in as a dependency of vue/cli-service, which I have at 3.0.0-beta.6 (the latest).

My template uses the following: vue-router, vuex, sass, babel, typescript, pwa, unit-mocha, e2e-nightwatch.

Edit: Just noticed it's not in the list, but I also chose to use vue-class-component and vue-property-decorator, as well, which may be causing issues.

I'm going to try upgrading all of my dependencies, see if that helps.

(Oh, and thank you for your help thus far!)

[Samuell1]

Or it can depends on node version?

[mattgrande]

I'm on node 8.10.0 currently.

Edit: Updated my local packages to the latest everything; Still the same issue. Will try upgrading node I guess.

[mattgrande]

Same issue with node 9.8.0 as well :/

I'll try and create a repo that duplicates this afternoon so you can see what I see.

[Samuell1]

@mattgrande do you tried to remove package-lock and node_modules?

[mattgrande]

I have, yes. (Well, yarn.lock, but same idea)

[CompuIves]

Hey @mattgrande, could you maybe open up a temporary github repo with the reproducible example so we can test it locally with the same dependencies? This is a really interesting case.

[mattgrande]

Yeah, I will try and do that tonight; Maybe tomorrow, though.

[Samuell1]

Until we resolve it you can use this simple hack v-if="roles.length === 0" on md-table-empty-state.

[VdustR]

I still can not reproduce it with new webpack environment with module version from yours.

[mattgrande]

Reproduce case: https://github.com/mattgrande/md-empty-state-reproduce

Let me know what I'm doing wrong :)

[Samuell1]

Looks like mostly something is changed or fixed in new Vue version.

[mattgrande]

I just noticed on my first page, I said I was using 2.5.13, however in package.json it was ^2.5.13 and had actually resolved to 2.5.15; The reproduce repo is pinned to 2.5.16.

Coming from Angular, I can't believe how often Vue updates versions...

[Samuell1]

@mattgrande your installed version depends on package-lock file

[Samuell1]

@mattgrande As you can see i found a solution for a issue, do you think you can try it? If works for you, i merge it to dev.

To test it you can update your local dist file at line https://github.com/vuematerial/vue-material/blob/dev/dist/vue-material.js#L27023 or use my PR and compile your local version.

From:
_vm.value ? _vm._t("default") : _vm._e()
To:
!_vm.hasValue ? _vm._t("default") : _vm._e()

[mattgrande]

Hey @Samuell1 I'm happy to report this works! My only (very minor) concern is that the thead still appears; Is that intentional?

[Samuell1]

@mattgrande i think table head is intentional to show.

Thanks for helping me to test it!