I'm using PrimeVue 3.11.1 with Vue 3.
I have a data table that is using lazy loading and when I reload the dataset I need to clear any sorting that was previously used.
I'm using resetPage which is clearing the paging, and the lazy params are being reset, but I cannot clear the sorted column.
sortField="initSortField" - clean after load fresh fetch without reload page.
Related
I am developing a Vue3 application with a component that renders a D3 chart.
The problem occurs when I navigate to another page and get back to the same D3 component but with different data. The D3 charts keep on getting stacked on each other.
I am using Vue3 and found it is a bit difficult to disable caching of components but perhaps I missed some options. I wouldn't mind disabling caching completely, because most of the data is obtained from localStorage, so pretty quick anyway
Here is a sandbox to illustrate the problem:
https://codesandbox.io/s/vue-3-vuex-4-vue-router-forked-eem3ui?file=/src/components/Miserables.vue
If you click on the "Miserables" link, then to another link (Playerlist or About) and back to Miserables, you'll see the charts stacked.
You have at least 2 "smells" in your code:
you are creating and injecting <script> tags every time your Miserables component is being mounted - after multiple mountings you will have a lot of duplicate JavaScript code, pontentially poluting the global namespace (multiple times) and worse - potentially attaching multiple event handlers or setting up timers;
on every mounting you are creating a new SVG and appending it to the BODY - so it's not Vue's fault that you're getting multiple SVGs on the page;
trying to lazy load one of my custom feature module. it creates chunk but not lazily working in browser. it loads at first time . please suggest what I am missing here...
Based on the fact the chunk is created it looks like you are missing the cmsComponents array.
You need to list the CMS components present in your lazy loaded module, that way Spartacus will know when to load the chunk. Please see https://angular.io/guide/router#getting-route-information and also a quick example I sprung up https://github.com/LTiger14/custom-style-spartacus/blob/main/src/app/app.module.ts#L26-L33.
Context:
Currently, I am working on a complex editor application which uses vuex state, vuetify's expansion panel and vue's dynamic component. Each dynamic component uses data which is accepted as props and has its own nested components.
Problem:
The issue with this approach is as the app deals with the large, nested state, the add operation in the UI slows down and makes the UI unusable.
Note:
In the example, I have added 1000 objects just to replicate the issue. Unfortunately cannot use pagination here.
Is there any other way to approach this problem to improve the performance, any suggestions would be helpful.
Issue:
Codesandbox - Demo
Codesandbox - Edit
You are using index as your key and at the same time adding new item to the beginning of the array using unshift - which means every time the new item is added, all components needs to be rerendered. Use :key="item.name" instead and you will see huge speed improvement on adding new items...
Initial render is another problem - if the pagination is not an option, you can look at some virtual list solutions which do render only part of the list visible and make scrolling effective by reusing existing components. One example is vue-virtual-scroller. Vuetify itself has it's own implementation but I'm not sure how well it will work with expansion panel considering this note in the documentation:
We are in the process of integrating the v-virtual-scroll component into existing features and components. If you are interested in helping, please reach out to John Leider in the Discord Community.
(Also it seems you are using really old version of Vuetify...)
I would like updates to the dstore appearing in the dgrid without having to call refresh.
do you know why the grid does not remove the old row?
my records has no id property but Ive setup the idProperty correctly.
My grid is expected to receive multiple updates and calling to refresh would probably have performance implications.
So if you can point a way to throttle refresh events it can also help.
Thanks,
Nimrod.
dgrid listens to change events if the store provides them. dstore's Trackable mixin adds change events to the store. Try mixing in Trackable to your store and you should see dgrid automatically render in response to any of the store's add/put/remove calls.
Using the object dropdown component I want to change the query and display a new list of items. Is that possible once the component has been created ?
http://developer.rallydev.com/help/object-dropdown
The best way to do this is to destroy the dropdown and recreate it again. Only a few of the AppSDK 1.0 components can reload their own data.
The ComboBoxes in the new App SDK 2.0 can be refreshed by calling load on its underlying store again (passing new filters, context, etc.)