vuetifyjs / vuetify

🐉 Vue Component Framework
https://vuetifyjs.com
MIT License
39.67k stars 6.95k forks source link

[BUG] No change in Data-table on new data #3223

Closed ugurcemozturk closed 6 years ago

ugurcemozturk commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

In your store, you can do:

import Vue from 'vue'
Vue.set(state.arrray, indexOfItem, newValue)
ugurcemozturk commented 6 years ago

@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 commented 6 years ago

@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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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

Could you post some sample code?

skvisli commented 6 years ago

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] commented 5 years ago

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