Adding select fields dynamically and validation in VueJS

by

I am adding select fields using VueJS & it’s working fine, but I want to add validation.

If the user selects 8mm in the first select then 8mm will disabled in other select tags.

Here is HTML & Vue JS code

<div class="form-group" v-for="(input,k) in inputs" :key="k">
    <select v-model="input.thickness" name="thickness-`${k}`" class="basicRate block w-full p-3 mt-2 text-gray-700 bg-gray-200 appearance-none focus:outline-none focus:bg-gray-300 focus:shadow-inner" required>
        <option disabled selected value> -- Select thickness -- </option>
        <option value="8">8mm</option>
        <option value="10">10mm</option>
        <option value="12">12mm</option>
        <option value="16">16mm</option>
        <option value="20">20mm</option>
        <option value="25">25mm</option>
    </select>
    <input type="text" class="form-control" v-model="input.qty">
    <span>
        <i class="fas fa-minus-circle" @click="remove(k)" v-show="k || ( !k && inputs.length > 1)"></i>
        <i class="fas fa-plus-circle" @click="add(k)" v-show="k == inputs.length-1"></i>
    </span>
</div>

var app = new Vue({
    el: "#app",
    data: {
        inputs: [
            {
                thickness:'',
                qty: ''
            }
        ]
    },
    methods: {
        add(index) {
            this.inputs.push({ thickness: '', qty: '' });
        },
        remove(index) {
            this.inputs.splice(index, 1);
        }
    }
});

Screenshot of selects

As you see the first two drop-downs have the same value meaning the user can select the same values. I’m looking for simple validation where if the user selects some option then he or she won’t select the same value in other dropdowns.

Thanks in advance.

85 thoughts on “Adding select fields dynamically and validation in VueJS”

Leave a Comment