JSBin

[strebl]

Hi @njleonzhang

I have a problem with vue-data-tables. To demonstrate my issue I wanted to create a JS Bin.
Did I do something wrong or isn't it possible to use vue-data-tables without module bundler?

[njleonzhang]

It's exported as UMD, so I think it should be able to work without bundle, but I never tried to do that. you can send me a email with your issue description and sample code so that I can help to solve the problem ASAP. My email: zpczjl@126.com

[strebl]

Thanks @njleonzhang for your offer to help me!

Yeah I was able to include it. But I think vue doesn't know about vue-data-tables.

I inserted all 3 dependencies into the html.

<script src="https://unpkg.com/vue@2.2.4"></script>
<script src="https://unpkg.com/element-ui@1.2.5"></script>
<script src="https://unpkg.com/vue-data-tables@1.0.8"></script>

Vue works.
Element UI works.
But vue-data-tables failed: Unknown custom element: <data-tables> - did you register the component correctly?

But that was not my problem. Just wanted to create a demo for my problem. But no problem, will create it somewhere else and post it to you.
I think you made a really great job with that project! Therefore I'll try to make it as simple as I can to show you my problem.

[njleonzhang]

@strebl I make a codepen for you. you can copy the code to jsbin to describe your issue.

[strebl]

Thanks @njleonzhang for your help!

Now to my real problem:
I'm using the prop search-def and leveraging the event selection-change. Using booth at the breaks the selection feature.

In my selection-change handler I set an array to the currently selected rows:

handleSelectionChange (selectedComputers) {
  this.selectedComputers = selectedComputers
},

That works fine until I'm using the selectedComputers elsewhere.

Even if it's just something simple like this breaks it:

<div>Using the variable: {{ selectedComputers }}</div>

If you look at the events at the Vue Devtool, you see that the checkboxes get selected but they are getting unselected immediately.

I created a pen which demonstrates my problem:
https://codepen.io/bluesheep/pen/RpMeWL?editors=1010

"Fix" 1
If you remove the line which outputs the selectedComputers from my demo, it works:

<div>Using the variable: {{ selectedComputers }}</div>

"Fix" 2
Or if you remove the search-def prop, it also works:

:search-def='searchDef()'

I hope I described my problem well enough.

[njleonzhang]

@strebl Yeah, I got it. an interesting issue. It may cost some time to fix. :-(

[njleonzhang]

@strebl fixed this issue, would you please have a try with new version 1.1.0

[strebl]

No problem, take your time.

Not critical for me. I just wanted to conditionally disable a button.
Using the array within a function is no problem. Just using it inside a template breaks it.

[strebl]

Oh was typing^^ That was fast! Will test it and will give you feedback, thanks!

[strebl]

It work, thanks @njleonzhang!

[njleonzhang]

@strebl this issue should be fixed by using a data prop. using function as prop may cause performance issue.
refer to https://jsfiddle.net/zpczjl/8340vm0x/ and b035511

[strebl]

Thanks for the update!