I have a Nuxt app which uses Vuetify as UI library. I've noticed that there was a delayed input in my input fields. There are lot of fields on the page then i looked at my login page which has only 2 fields. That page is also responding to input slowly. I've have some watchers in the page for other field but for the fields which doesn't have any validation and any watcher/computed properties the input is still delayed. This is happening across the app. I've tried to add lazy to v-model as <v-text-field v-model.lazy="neworder.description" label="Description"></v-text-field> but no luck. Can anyone help me with this?
Thank you
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'm still pretty new to Vuetify and try to learn with the docs and forums but I've come across a problem :
I couldn't find a way to disable only one button of the pagination component.
Example :
A user is on page 2. I want them to be able to go to page 1 but to prevent them from going to page 3 until they meet certain conditions.
The problem is I saw that the "disabled" prop can only be a boolean on the pagination component (thus disabling the whole component).
Does anyone know a way to achieve that? Might it become a feature request?
Thanks in advance
Im working through an accessibility audit for one of our sites. One of the things that has came back is empty headers where we have used vue for the text content. The audit is not seeing the rendered content and is hightlighting this as an issue. Does anyone have any ideas as to a solution?
<h3 v-html="post.title.rendered"></h3>
This is seen as an empty h3
I found an link here that helps
Screen readers and Javascript
Thanks for the replies
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 an old-style, multiple-page website, with a multiple steps checkout process. This all works with JS disabled, and it is critical that it keeps doing so.
The checkout form has no JS at all, at the moment, and I'd like to improve it progressively (eg. dynamically showing or hiding fields, doing live validation, etc...).
I have already wrapped the entire website with an #app div, and I mounted a Vue instance to it. Then I created a few components which work correctly (but are not critical, so if JS is disabled then the whole thing keeps working and the components are just empty).
Now I have a long checkout form which is generated server-side (say: <form id='address-form'>).
The best course would be to put it into a component (say <checkout-form>) and use it. I can't do this, because 1) the form is generated server-side 2) it needs to work without JS.
Ideally, I would love to create a component with no template, and attach it to the existing HTML.
Is this even possible?
Edit: continuing to dig the Internet, I found this tutorial. This is exactly my problem, but if this is the only way to do it, then I will revert to JQuery :) Manually duplicating the entire HTML (one server side, the other in Vue) is definitely not a good idea.