@metalsadman said in Q-Tabs and vee validate:

@KorbenDallas
After sometime, I got it to work with veevalidate :).
Here you go https://codesandbox.io/s/ox893063w9.

Well thanks! But sadly this still isnt it. I tweaked it to show the issue.

https://codesandbox.io/s/wq170rmq9k

First tab has nothing and is the default tab.
Click the save button to validate the form no errors are displayed but it should because there are errors in the other tabs.

Now click all the tabs(I enabled keep-alive so they dont disappear from the dom) and then click save. All the errors are counted.

The hack I did for now (not shown here) is to visit all the tabs on load, that’s 8 tabs in a series of nextTick calls.

@zeidanbm said in Q-Tabs and vee validate:

@korbendallas Okay now I understand what you want. You are probably using v-if on the tab and that’s why the html is not rendering. You should use v-show for this type of things that involve tab switching(this way the html will render with display none). Then the validation should work, otherwise you will have to implement that logic yourself. Also, if you want to seperate the validations you can use validation scopes and that will give you back validations in seperate errorbags for each tab.

No v-if from me. Its the default behaviour of the tabs. Go check out the html
https://quasar-framework.org/quasar-play/android/index.html#/showcase/navigation/tabs/tab-panes
There are 3 tabs in the first example but this is what you get.
<div class=“q-tabs-panes”>
<div class=“q-tab-pane animate-fade-left”>Emails tab</div>
<!---->
<!---->
</div>

edit: After looking into vee validate, I think it’s not what you should use in this case, since it’s template based, unlike vuelidate which is model based. So yeah, I can see why it’s not working in q-tabs, you should consider vuelidate in this case if you want to use q-tabs, there might be some tricks to make it work with vee-validate but I think it will add more complexity at least for this case tbh.

Its a tradeoff, we liked the simplicity and the integrated localization of veevalidate on the other hand I prefer the model focused way vuelidate implements.

Thx for the replay but that’s not the issue.
On this one page lets say Tab-2 has required fields if the user does not click on tab-2 at least once before hitting save they fields from that tab wont be validated because they dont exist, the html of Tab-2 is something like <----> once you click it then the html will exist

I have a form with many tabs and some required fields in them. The problem is that they wont validate unless the user already opened the tab since the tabs are not rendered until they are opened. Half the solution was using keep-alive so they dont disappear when the user click an other tab. The other half is I click all the tabs by code on first load, is there not an option I could use instead of this ugly hack?

Well for those interested I got it working. I had to add “vue” in the dependencies section in package.json then Vetur gave me vue intellisense in .vue files.

@nothingismagick said in Should I not have basic vue intellisense in vue files? I have it vue cli projects but not in quasar cli.:

For a workaround until we release 1.0 - please check this out:
https://forum.quasar-framework.org/topic/2322/how-to-import-quasar-components-to-use-vue-code-completion-in-intellij-idea-webstorm/7

Thx for the reply but this is not my issue. My issue is with basic vue intellisense. For example in this screenshot if I was to put a comma after the data() function I should get all the vue component members (created, bound, etc…) not talking about quasar components here. I get these if I start a project with vue cli but not if I start one with Quasar.

in the exports default section stuff like created, computed, mounted etc…I have none of this.