Vuetify: [BUG] No change in Data-table on new data

[ugurcemozturk]

Versions and Environment

Vuetify: ^0.17.7
Vue: ^2.5.13
Vuex: ^3.0.1
Browsers: Google Chrome
OS: MacOSX

Steps to reproduce

Data loaded from the server via axios then stored in vuex store
New data posted to server
New data is accessible via vuex store
BUT data-table doesn't render the new data
Also tried to re-fetch data from API instead of listening the vuex state to re-render for data change. None of them didn't worked.

Expected Behavior

New data should be rendered as a new row in data table. Either via API call or vuex state change.

Actual Behavior

No change in Data Table.

[KaelWD]

https://vuejs.org/v2/guide/list.html#Caveats

Please only create issues with the provided issue creator. In the boilerplate for creating an issue, it explains that any ticket made without this will be automatically closed. Thank you.

[wobsoriano]

In your store, you can do:

import Vue from 'vue'
Vue.set(state.arrray, indexOfItem, newValue)

[ugurcemozturk]

@sorxrob Thanks but solved in another way.

It's not easy to find on documentation but in examples.

In data-table component, there's 2 props that saves my day.

1) Item-value , that stand for the hidden value such as ID of the model that you want to bind.
2-) Item-text , that stands for the display name if the model that you want to bind.

[ghost]

@ugurcemozturk Could you please explain how you solved this issue? I am having the same problem loading from firebase via vuex. How exactly do you use item-value and item-text?

[ugurcemozturk]

Hey @sebit-ke, it's my fault that it was a wrong answer.
Anyhow, for dynamic data which should re render and gets updated everytime, you should store then in vuex store. Do not declare any local variable in your component.
If possible (I'm sure it is) you dont need to implement your update or edit methods in your component too. Put them all in the vuex store.
If you get clearly how vuex in your mind and your hand, it will solve it.
Btw, what is your main problem, what's not working correctly?

[skvisli]

Hi @ugurcemozturk. Me and @sebit-ke are working on the same code, so I can fill in for him.
Our problem is:
I have a action that sets a firebase.on() listener to listen for changes in the database. If there are any changes, I call the mutation "setData" which sets the "Data" field in the Vuex Store. Then in the component I have a computed value "Data", which uses Vuex getters to return "Data" from the Vuex Store. The items in data-table is bound to "Data" with v-bind. Still the data-table does not update when changes in the database, even though changes gets updated in the Vuex Store.

[jeeftor]

I'm confused - is there a solution to this?

Could you post some sample code?

[skvisli]

Thanks for trying to help @jeeftor ! Turns out it was a problem with the Firebase listeners. Once they were set up correctly, the data-table updated as expected.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord