Svelte reactivity - Class member change doesn't reflect on UI

user_7473843 0
Viewed 884

I'm currently creating a table manager web component which consists of a few different components, like data-table, search-bar etc. I manage it separately because there are cases when the table or search bar is not used, but when they're used together they use the same class as an input. The search bar calls one of the class's methods for search and it filters the data accordingly, and however the data property is changed in the class, it won't reflect on the UI only if I do some action to refresh is ( e.g. checking a checkbox ).

So I'm changing one member of a class by a class method call in component A and I want it to reflect in component B.

export let config: TableConfig = new TableConfig();
$: setConfig(config);

...

// Search function:
config.quickSearch(quickSearchValue);

I loop through the config.data to show some data. After the search, the data member changes and if I use a setInterval to log the config in the table component, it shows the changed data but the UI won't refresh.

Maybe my approach is completely wrong, but this is how I did it in Angular, but it had a lot of unnecessary dependencies, so now I'm trying to get rid of that.. So my main goal is to use this anywhere, like Svelte, Angular, VanillaJS etc.

EDIT:

REPL example: https://svelte.dev/repl/311538f2cf52484f8d0ac3aeae7540ea?version=3.31.0

custom-element web-component svelte javascript
1 Answers

The UI does not change, because as far as Svelte knows there has been no change in data. You would have to add a subscription system to your class if you want to keep that structure.

Svelte however has a better approach for sharing data across components and that is stores. What you could do in your situation is create a custom store enter link description here that encapsulates the logic you used to have in a class. That way you can simply subscribe to this store in one component and trigger an update in another one, benefiting from Svelte's reactivity.

user_119561070
Related