Vuetable-2: TypeError: Cannot read property 'refresh' of undefined

Created on 23 Mar 2017  Â·  6Comments  Â·  Source: ratiw/vuetable-2

Not all the time, but sometimes when I fire refresh event to refresh the vuetable2, the error comes out.
The use case is that I pop a modal window to change the content then click save button to request an api to update the DB at the backend. After that I need to refresh the vuetable, so I fire a refresh event.
Anyone has the same problem?

Most helpful comment

@ratiw I have figured out the cause of this issue. It is not the problem of vuetable-2. It is my misuse of the vue-event.
Because I have many pages using the same structure with a filter bar and a vuetable-2. All the filter events I have defined have the same name 'filter-set'. And when on one page the filter-set event is fired, the event was captured on the other page, which caused this 'refresh undefined' problem.
Now close this issue.
Thanks @ratiw .

All 6 comments

@larryu Might be related to #62

@ratiw Thanks. For my case, there is a list component, which consists of one vuetable component and a popup component. When clicking the edit custom action, the popup screen will be shown, after finishing editing, close the popup screen and go back to the main component and refresh the vuetable. Therefore I don't think this is related to the router because there is no router interfering here.
Perhaps my understanding is wrong, I will try to trace this for a while. Thanks again.

@ratiw I have figured out the cause of this issue. It is not the problem of vuetable-2. It is my misuse of the vue-event.
Because I have many pages using the same structure with a filter bar and a vuetable-2. All the filter events I have defined have the same name 'filter-set'. And when on one page the filter-set event is fired, the event was captured on the other page, which caused this 'refresh undefined' problem.
Now close this issue.
Thanks @ratiw .

I have passed the filter name to the component and it solved the issue.

props: { searchPlaceHolder: '', filterName: '' } methods: { doFilter () { this.$events.fire(this.filterName, this.filterText) },

I also encounter this 'refresh' undefined problem, I also did what @moh3n65 above stated but it doesn't solve in my case.

Just some sort of other way to solve is, I destroy the event using beforeDestroy lifecycle on the component when route changes.

@causingh For my case, the router URL does not change. On the same page, show a modal window, then before closing the modal fire a refresh event to trigger data refreshing. And I found before calling refresh method, adding null check of the vuetable would be a good way to avoid error.

Was this page helpful?
0 / 5 - 0 ratings