lundi 1 février 2016

Vue.js limit selected checkboxes to 5

I need to limit number of selected checkboxes to 5. I tried using :disabled like here:

    <ul>
        <li v-for="item in providers">
            <input type="checkbox" 
               value="{{item.id}}" 
               id="{{item.id}}" 
               v-model="selected_providers" 
               :disabled="limit_reached" 
            >
        </li>
    </ul>

And then:

new Vue({
    el: '#app',
    computed:{
        limit_reached: function(){
            if(this.selected_providers.length > 5){
                return true;
            }
            return false;
        }
    }
})

This kind of works, but when it reaches 5, all of the check boxes are disabled and you can't uncheck the ones you don't want.

I also tried to splice the array with timeout of 1 ms, which works but feels hacky. Can anyone recommend anything please?




Aucun commentaire:

Enregistrer un commentaire