If anyone’s interested, I tried both vue-multiselect and vue-treeselect, but none of them gave me the exact functionality of grouping, with unselectable parent items and filtering on all items shown. So I mocked up what I needed using a q-select and q-items: https://codepen.io/jammy-git/pen/KKdarbP?editors=1011
Best posts made by jammy-git
-
RE: Q-select with nested or grouped data and filtering?
-
No validation with q-option-group?
I need to ensure the user has select an option in an option group when the form is submitted, but it looks like the q-option-group doesn’t have any validation built in (no rules prop, etc). Is this the case? Is it not possible to add validation to q-option-group?
Latest posts made by jammy-git
-
Is there a valid attribute on q-form or similar?
I’m looking to display an icon at the top of the q-form to display the validation status of the form. When invalid it’ll show an exclamation mark and when valid, a tick mark. I’d like this icon to update automatically/reactively - is there a
valid
attribute on the q-form component that I can use, rather than have to callvalidate()
after every user input? -
No validation with q-option-group?
I need to ensure the user has select an option in an option group when the form is submitted, but it looks like the q-option-group doesn’t have any validation built in (no rules prop, etc). Is this the case? Is it not possible to add validation to q-option-group?
-
How to apply success/positive state to q-field upon validation being correct?
When the validation fails on an input field, the input gets a nice red border and the red error message is displayed below. I notice if you change the
text-negative
totext-positive
ondiv.q-field__control
, the red border gets changed to green.Is there anyway to automatically apply this state to the field/input/div automatically when all the validation rules pass?
-
RE: Q-select with nested or grouped data and filtering?
If anyone’s interested, I tried both vue-multiselect and vue-treeselect, but none of them gave me the exact functionality of grouping, with unselectable parent items and filtering on all items shown. So I mocked up what I needed using a q-select and q-items: https://codepen.io/jammy-git/pen/KKdarbP?editors=1011
-
Q-select with nested or grouped data and filtering?
I’ve used the select2.js plugin on other projects but I would love to maintain my use of the Quasar framework on this particular project.
I need to have a q-select field, but with option groups to allow the data to be nested. Only the child items should be selectable (as per native optgroups) and preferably it should all be filterable.
Is this possible with a q-select? I couldn’t see any way of using nested data or native optgroups?
-
RE: Using an async validation rule with Vuelidate doesn't work
Hi Scott - thanks for the suggestion. It does work well. Unfortunately it breaks the q-form submit functionality where the validation is automatically run and any invalid field is highlighted and the submit is stopped.
-
Using an async validation rule with Vuelidate doesn't work
Not sure if this is specific to Vuelidate or when used with Quasar (have also posted a Vuelidate Github issue). I do note that most of the Vuelidate examples have error messages hardcoded and shown using v-if="$v.field.$invalid", which with Quasar is not needed, but might be the cause of this issue?
I’ve put together a pen to demonstrate the problem
https://codepen.io/jammy-git/pen/OJVWjWZI understand the fetch API call should return true/false, but in this example, the call response still evaluates to true. As you can see, the error message is always displayed. I’ve had a look at it seems Quasar thinks the async function always returns false?
-
RE: Vuelidate validation minLength or maxLength not working
Hi - thanks for the quick reply!! Yup, I’ve literally just noticed that error too!
-
Vuelidate validation minLength or maxLength not working
I’ve implemented validation with Vuelidate following this guide: https://medium.com/@email_47764/quasar-form-validation-with-vuelidate-b3aeb3d27fc2
However, when I try to extend that and use a validation rule that requires a parameter (like minLength or maxLength, the input field is no longer rendered. Everything works fine up until I add in the min/max rules?!
This is my template:
<template> <form @submit.prevent.stop="handleSubmit" class="pb-8 mb-4 w-4/12"> <div class="mb-4"> <label class="block text-gray-700 text-sm font-bold mb-2" for="name">Name</label> <q-input v-model.trim="user.name" outlined autofocus label="Name" @input="$v.user.name.$touch()" :rules="[ val => $v.user.name.required || 'Name is required', val => $v.user.name.minLength || "Minimum length is 2 characters", val => $v.user.name.maxLength || "Maximum length is 40 characters", ]" lazy-rules ></q-input> </div> <div class="mb-6"> <label class="block text-gray-700 text-sm font-bold mb-2" for="email">Email</label> <q-input v-model.trim="user.email" outlined label="Email" @input="$v.user.email.$touch()" :rules="[ val => $v.user.email.required || 'Email is required', val => $v.user.email.email || 'Please enter a valid email address', val => $v.user.email.maxLength || "Maximum length is 255 characters", ]" lazy-rules ></q-input> </div> <button type="submit" class="w-full bg-red-500 hover:bg-red-700 text-white font-bold p-4 rounded-full focus:outline-none focus:shadow-outline">Save</button> <router-link :to="{ name: 'admin.users' }" class="mt-5 block text-sm hover:font-bold" >Cancel</router-link> </form> </div> </div> </div> </template> <script> import { required, email, minLength, maxLength } from 'vuelidate/lib/validators'; export default { data () { return { user: { name: '', email: '', } } }, methods: { handleSubmit() { this.errors = this.$v.user.$anyError; if ( this.errors === true ) { return; } axios.post('users', this.user) .error((error) => { $this.$q.notify({ type: 'negative', message: 'There was a problem processing your request', progress: true, }) }) .then(() => { this.$q.notify({ type: 'positive', message: `User has been created successfully.`, progress: true, }) }) .then(() => { this.$router.push({ name: 'users' }); }); } }, mounted () { }, validations: { user: { name: { required, minLength: minLength(2), maxLength: maxLength(40), }, email: { required, email, maxLength: maxLength(255), }, }, } } </script>