I once had a bit different setup where, inside the v-list-item, I had several elements, and in that order viz. v-list-item-title, v-hover, v-row, v-col, v-menu, v-list, and v-list-item.

Now, the problem was, the value of the main v-list-item-group model was set to a random value when the v-list item was clicked (inside the v-menu). The solution then I found was, I set the value to the v-list-item (inside the v-menu) to the expected value. That resolved the value issue.

The second issue that appeared was since the v-list-item of the v-menu now has a value, and it’s also a current/active value of the model, it was solved then by the following:

I put flat to v-list, so that the background styling disappears, next the icon color was a bit heavy, which was then manually set to grey, the expected colour, via primary attribute. Last was the font-weight which was set to the v-list-item and that solved it.

In the ui we had a listing of some items, which had options of edit and delete.

However, with the following function, life is easy. One thing to note though: it throws a browser error, if the image is found missing. I’m yet to look into if the error can be suppressed by wrapping a try/catch block.

Usage:

1
2
3
4
5
6
7
8
9
phone: function (val) {



            let self = this;



            self.$nextTick(function () {

                self.phone = val.replace(/[^\d.-]+/g, '');

            });



        },

That is, we need to put a $nextTick to make this work.

First is when rendering the component use a v-if. For props as well as the source of the dialog which makes the dialog appear and disappear. It helps solve an important issue.

When inside a component (SFC), VDialog (v-dialog) does not render mounted each time. Only the first time. We are having v-if (on the v-dialog model) here so that makes mounted run each time but there are more reasons to have v-if as well (but I don’t remember ). Otherwise we could also run into an issue where the dialog opens fine only once. This could happen if we are reading from props and assigning it to a data property inside mounted, since mounted runs only once and when clicked outside, if we do not make the data property false, it would not open the dialog again. Solution to this is mentioned below.

It is important for me to allow escape or outside click but that was resulting a bug with opening multiple dialogs.

For the following code please notice the

Please note the above learnings are in context of Vue 2 and not Vue 3.

The trick is to add the z-index to the v-dialog

The solution is easy but nearly impossible to know at first.

The

Perhaps this applies on v-autocomplete as well?

How to use perform a custom validation?

1
2
3
4
5
6
7
8
9
10
11
const validatePhoneNumber = (value) => {



    if (value) {

        value = value.replaceAll(/[^0-9]/g, '');



        return value.length === 10;

    }



    return false;



};

How to validate checkbox with Vuelidate (or perhaps even a radio button?)

Otherwise, the error is thrown first but if you check and uncheck again and submit the form again then the error won’t be thrown.

Source: https://github.com/vuelidate/vuelidate/issues/332

$v.days.$dirty && !$v.days.required $v.loan_purpose.$error $v.call_email_address.$invalid

How to use requiredIf?

How to check for a field with vuelidate whether it is valid or invalid inside the vue instance?

Form dirty touch and validity check

1
2
3
4
var self = this;

self.$v.$touch();

if (!self.$v.$invalid) {

}

Bootstrap 4 input field validation example

1
2
3
4
5
6
7
8
9
10
11
<div class="slide-ranger col-md-12">

    <label for="amount" class="control-label sr-only">Loan Amount</label>



    <input type="text" id="range" name="range" class="form-control" v-model="range" :class="{'is-invalid': $v.range.$error, 'is-valid': (!$v.range.$error && $v.range.$dirty)}" @keyUp="$v.range.$touch();">

    <div class="invalid-feedback" :class="($v.range.$error && $v.range.$dirty)">Please enter a valid loan amount

    </div>



                            <p id="slider-range-min"></p>

                            <span style="display: flex;justify-content: center;font-size: 10px;">* use the slider to select the desired loan amount or input manually</span>



                        </div>

Bootstrap 4 select / dropdown validation

1
2
3
4
5
6
7
8
9
10
<div class="form-group col-md-6 mt30">

                            <label class="control-label" for="loan_purpose">What is the purpose of loan?</label>

                            <select id="loan_purpose" name="loan_purpose" class="form-control" v-model="loan_purpose" :class="{'is-invalid': $v.loan_purpose.$error, 'is-valid': (!$v.loan_purpose.$error && $v.loan_purpose.$dirty)}"

                                @change="$v.loan_purpose.$touch();">

                                <option value="">Select purpose of loan</option>

                                <option value="Home Improvement/Renovation">Home Improvement/Renovation</option>

                                <option value="Bill Consolidation">Bill Consolidation</option>

                                <option value="Retail/Purchase">Retail/Purchase</option>

                            </select>

                        </div>

Vuelidate Nested Validation

The validation for nested validation is slightly tricky. It involves the use of $each and the methods in the computed no longer work for us. Shortly we will discuss why. Another thing is writing the errors for the HTML part also gets trickier with the loop.

Despite all these problems, the right understanding will help us set things up pretty quickly.

First thing first!

You should know about $v.

In the Vue debugging panel, you can view elements inside $v and this will help you see the things under the hood and whats going on?

Setting up the rules in the validations block should be identical to what you have in the data block. Just when you start the array or the object part with the brace inside the array. Have an $each over there.

Like this! Observe this carefully! doing this carefully will save you time.

Next,

The second part is to write the error display code and the most important part here is to introduce a parameter. The parameter here in an index, it helps track that the error is for which iteration and highlights only that specific element. One more thing to note here is computed properties will not work here well with the parameter. The fix is very simple. Move the method to methods.

I figured the following part by looking at $v carefully, hence $v should be observed carefully.

Simplify Errors with https://dobromir-hristov.github.io/vuelidate-error-extractor/

Well, the answer is we don’t need to worry about it. If the condition for required is not met, the email rule should not apply and it doesn’t. Form submits as you would expect (without any errors). However, if user types in the email anyway then Vuelidate expects it to be in a proper format.

Following is just fine.