Блог

У меня есть несколько элементов флажка, подобных этому:

 <label>Item 1 <input type="checkbox" v-model="items" value="Item 1" /></label>
<label>Item 2 <input type="checkbox" v-model="items" value="Item 2" /></label>
<label>Item 3 <input type="checkbox" v-model="items" value="Item 3" /></label>
 

Я добавил наблюдателя, чтобы они не могли выбирать более 2 элементов:

 watch: {
  items() {
    if(this.items.length > 2) {
      alert('You can only pick 2 items');
      this.items.splice(-1,1);
      console.log(this.items);
    }
  }
}
 

Элементы внутри представления обновляются правильно (если они выбирают элемент 1, элемент 2, а затем элемент 3, он удаляет элемент 3 из массива).

Также появляется окно предупреждения.

Однако флажок не снимается в html, и я не могу понять, почему он не снят, поскольку он привязан к v-model.

Я тоже пробовал this.items.pop() с тем же эффектом.