Block last checked to be unchecked

by RomainMazB

HTML

<div id="app">
   <input type="checkbox" id="a" value="A" v-model="checkedArray" @change="check($event)">
   <label for="a">A</label>
   <input type="checkbox" id="b" value="B" v-model="checkedArray" @change="check($event)">
   <label for="b">B</label>
   <input type="checkbox" id="c" value="C" v-model="checkedArray" @change="check($event)">
   <label for="c">C</label>
   <br>
   <span>Checked array: {{ checkedArray }}</span>
 </div>

CSS

.dragArea {
  border: solid 1px black;
  background-color: grey;
  min-height: 10px;
}



.document-item {
  background-color: white;
  border: solid 1px black;
  margin: 8px 8px 8px 8px;
}

JavaScript

const app = new Vue({
  el: '#app',
  data: {
  	checkedArray: ['A', 'B', 'C']
  },
  methods: {
  	check(evt) {
    	if(this.checkedArray.length == 1) evt.stopPropagation();
    }
  }
});