I recently updated a vue/quasar project to vue3/quasar 2.
The validation of the q-input's contained in the q-form still work, but when a q-input is not valid, no focus is made on it. In long form where you don't see all the form input's at the same time this is really annoying.
With Vue 2, all was fine, so I guess this is a consequence of the upgrade.
Anyone a clue?
Related
I've got a rather weird scenario going on here. I am trying to add tooltips to an existing ASP.Net MVC application in which I'm upgrading Bootstrap to 4.6.2. The upgrade was very smooth with no complications; I just want to replace the default display of titles with the nicer looking tooltips, but for some reason they're not appearing. I tried to simplify things by creating a new view to isolate the problem, and still no tooltip. I tried again with completely new solution, and wouldn't you know it, it works! So my question isn't "how do I create tooltips", but "how can I debug what's going on in the failing project?"
Here's what I've discovered so far. I believe you can see everything that's relevant in this screenshot of the nearly-empty view. All the included script files are there in the right order, my script is there, initializing the tooltip, and there are no messages in the console. When I hover over the link, a new <div> element is added to the DOM. In DevTools, I use the arrows to expand the tree, showing everything in the tooltip. The .fade:not(.show) CSS selector is the reason I don't see it. In the working solution, the show class is properly added to the tooltip's <div>.
So, could there be some setting in the existing application preventing the addition of the show class? Is something failing in the tooltip code,causing it to never add the show class without reporting errors? How should I continue debugging this? I tried stepping through the bootstap.js file, but being a JS noob, I'm getting a little lost. The screenshot is from Chrome, but I see the same behavior in Firefox.
This turned out to be one of those embarrassing oversights. My BundleConfig.cs file was still pointing to old Javascript files that were still hanging around after the upgrade. I should have seen it in the version numbers in the <script> tags.
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 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
I'm working on a project maked with Laravel + vuejs and vuetify, everything is fine from the beginning, but after updating vuetify for using some new elements, i found that many elements are crashed because either is deprecated or changed.
I have to change my code too, but as the project gets big, it becomes difficult.
The question : what is the right solution based on your experiences with vuetify?
thank you in advance
I am finding that the Dynatree checkboxes are images and not real checkboxes. However, I am assuming that the checkbox state when captured properly will be rendered through Javascript properly, and the correct image (partial checked, unchecked or completely checked) will show up.
I am using Dynatree and the correct JSON with all attributes being captured properly. During the time of testing, everything seems to be working fine as expected with correct nodes showing the proper checkbox state.
However, I came back after the weekend and I tried to access the site utilizing the Dynatree; and the checkboxes have disappeared completely.
"select": true,
"hideCheckbox": false,
"unselectable": false,
Anyone using Dynatree with checkboxes facing the same problem and how they resolved the issue.
Please help. Thank you,
It's not the images...You can refer to the following link I am sure it will help and solve your issue :)
http://wwwendt.de/tech/dynatree/doc/samples.html