We have a large scale application but in Vue 2, Composition API and Nuxt.
However we load a lot of content in dialogs. After using the application for several minutes you can see a build up of these dialogs in the DOM.
Is there a way for Vuetify to use the existing dialog one instead of creating a new instance.
Or remove the existing one on close?
I can't see anything in the docs or similar issues from other users.
Each v-dialog with a v-model will be added to the DOM first time it's active/opened, then the visibility is changed on subsequent toggles. It's more "expensive" to add and remove DOM elements (size depending on its nested content) than toggle an active class and add a simple overlay. Probably why it's not recommended to nest v-dialog within a v-for loop, the DOM will get too crowded. If the dialog content is interchangeable, you could have one dialog on the page where the content is toggled too.
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;
I have been developing a Vue project and something caught my attention today. I used checkboxes with some sytling (I use them as toggle switches) throughout the project and thanks to these elements, I show or hide some elements and components. Toggle elements control specific data within each component. When the data istrue, some elements are displayed on the page and when false, they are hidden. What I noticed today is a little interesting. There is probably a simple solution, but although I have been searching the internet for a while, I haven't found a solution yet.
Here is the thing;
Let's say I am at the About page of my project. I used my toggle switches and now some of my elements and some sub components are displaying in the About.vue. Then I go and visit my Services.vue page and showing and hiding some elements and sub components as well. By the way, almost all of these pages have forms and I save these forms to local storage. When I return to My About page from my Services page, I see that the elements I activated have been restored. In other words, each component welcomes me with its default state when it is returned from another component. What I want to see is, If I go and check some checkboxes to show some element, No matter how long I roam between other routes, I want those elements to remain visible or hidden when I come back. For example, a toggle element must be activated to write a username and password on a component. After activating the toggle element, the user types the username and password and clicks the Save button. Then he continues to browse many areas of the project and when he returns, he sees that the toggle element is inactive and the username and password are not entered. I don't want it to be that way. How do I fix this?
you can use vuex for solved this problem.
https://vuex.vuejs.org/
Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. It also integrates with Vue's official devtools extension (opens new window)to provide advanced features such as zero-config time-travel debugging and state snapshot export / import.
I have a link element injected into translation string that I later consume via aurelia-i18n plugin. I need to listen for a click event on this link. As far as I researched it is not possible to add click.trigger="function() to an html element in translation string.
So I ended up just manually assigning a listener to the link DOM element in attached method of parent component. However when language updates, link updates as well and my listener is gone. Is there a way to know when component has been updated so I could reassign the listener there?
Or is a better solution to this issues?
I have 2 components. I have some checkboxes in first component.It resides in left side of the Web Page like Nav bar. In second component I would like to load some HTML Div element on the basis of those checkbox. Now I can load the divs while clicking on those checkboxes using below code.
mounted () {
EventBus.$on('change',this.formated);
},
But when I am clicking on a new checkboxes the loaded divs of previous checkboxes will not disappear. I can see both output of current and previous checkboxes as like output of .append() of jQuery.
How can I clear/disappear previous HTML outputs ?
You need use jQuery's clear() on the elements innerHTML which you're appending too. A better approach would be to instead of appending content, use a v-for directive and maintain an array in the data property with the content you want visible. That would be leveraging vue's reactivity for its intended purposes and offer a more flexible implementation.
I'm using angular 2 in my web application.
My application uses a lot of bootstrap modals.
I noticed that the modals contained inside a sub-route component are not showed correctly.
Infact, the modals contained inside the navbar element (the navbar is in the main state and always visible) are shown correctly, but those that are contained in the sub-route (so the html is loaded dinamically) present a bug... the shadow seems to be above the dialog itself, so it is impossible to press the buttons.
This is a screenshot:
As you can see the backdrop is above the dialog. This happen only on mobile devices.
What am I doing wrong?
I would avoid to keep all the modals inside the navbar and then open them with global events...
Thanks a lot
EDIT: I found this document:
If the modal container or its parent element has a fixed or relative
position, the modal will not show properly. Always make sure that the
modal container and its parent elements don’t have any special
positioning applied. The best practice is to place a modal’s HTML just
before the closing </body> tag, or even better in a top-level position
in the document just after the opening <body> tag. This is the best
way to avoid other components affecting the modal’s appearance and
functionality.
But is this the html of my modals (a lot of modals) is always in the dom. Isn't a heavy solution?
I fixed the problem using the following javascript code:
$('#myModal').appendTo("body").modal('show');
Thanks to Adam Albright for his post.