I created a component that lets the user pick a date. The component opens a “popup” (inline in the page) and instead of showing only one month, it shows the entire year. The component is “modal” so the user cannot interact with other parts of the page: Either pick a date or close the the date picker. Let’s call it
I can put this on a page next to inputs of date format and everything works as intended. However I noticed that the in the DOM now I have tons of elements, because the date picker generates more than 700 elements per instance (showing day, the span container, month name, etc). If the page has 20 or more date-pickers, now we’re talking about several thousand DOM elements.
Perhaps this is not a problem, other than the page will use more memory and maybe in Internet Explorer (the slow child) the page might be slower (idk).
My question is, this is essentially the same component that gets executed (no properties, no data context) and I’m just wondering if there’s a way for it to render/generate its DOM elements only once, no matter how many times is being “instantiated”. I tried using “key” but that didn’t work.
Current work around is to tell programmers to include the component in the page (Originally, the “date input” is another component that inside puts the
<date-picker>, so for now I have removed it. But I would like a solution where programmers (this will be used by about 40 programmers) don’t have to remember to also include an additional component if there are any “date fields” in the page)
Another thing that just occurred to me: Can the component in one of its life cycle events determine if another of itself already exists and abort its rendering? Or can I register with the Vue instance in a way to find out if the same component is already instantiated?
Component has no visible user interface when placed on the page (no button to click or link). The user interface is only displayed when “called”. I’m using an event mechanism and the component observes the event and opens the popup only when called. I tried using v-if, which indeed doesn’t generate the DOM elements. The downsize to this is that it takes a little longer to render when opening it (very noticeable in IE).