Block last uncheck
by RomainMazB
HTML
<div id="demo">
<template v-for="(item, index) in itemlist">
<label><input type="checkbox" :value="index" name="condiment" v-model="selectedItems" :disabled="selectedItems.length <= min && selectedItems.indexOf(index) >= 0" /> {{item}}</label>
</template>
<div>{{selectedItems.join(', ')}}</div>
</div>
CSS
label {display: block}
JavaScript
var demo = new Vue({
el: '#demo',
data: {
selectedItems: [0, 1, 2, 3],
itemlist: [
"Mayo",
"Ketchup",
"Mustard",
"Honey"
],
min: 1
},
mounted() {
console.log(this.selectedItems);
}
})