Как чекнуть во вложенном компоненте чекбокс через его пришедший $event.target?

Question

[Vitalionus]

Есть родитель:

<CheckboxComponent
	v-model="myDatas"
	:value="1"
	@click="onCheckbox($event)"
>
// В нем метод:
onCheckbox($event) {
	// Тут проверки, если сняты все чекбыксы, то включить последний снятый
	$event.target.checked = true;
		
},

В компоненте CheckboxComponent

<input
	:value="value"
	:checked="isChecked"
	type="checkbox"
	@click="handleClick($event)"
>
// И тут есть метод:
handleClick($event) {
	this.$emit('click', $event);
}

В родитель приходит $event, все ок.
Но у меня в родителе таких чекбоксов много, я хочу сделать проверку. Что бы не давать снять последний чекбокс.
Например что бы всегда любой один был включен. А снять все было невозможно.
Пробую в родителе сделать проверку по клику и если сняты все чекбоксы
То включать последний снятый через $event.target.checked = true. Но из Родителя

Comments

[ⓒⓢⓢ]

Но у меня в родителе таких чекбоксов много

выводите в цикле?

[Vitalionus]

ⓒⓢⓢ, Нет

Answer 1

[0xD34F]

Не надо напрямую устанавливать checked, так во vue дела не делаются.

не давать снять последний чекбокс

Добавьте своему компоненту параметр - disabled. В родителе делаете метод для вычисления его значения: если чекбокс выбран, и количество выбранных чекбоксов равно одному - true, в остальных случаях false. Например.

Comments

[Vitalionus]

А как понять к какому дисабледу обратится? Чекбоксы не в цикле.

[0xD34F]

Vitalionus,

Чекбоксы не в цикле.

Неважно. Если вдруг не нравится disabled - можно следить за выбранными значениями, и при необходимости откатываться на предыдущие, например.

Answer 2

[Aetae]

Не надо гонять состояние туда-сюда, просто сделай:
$event.preventDefault();

А в целом - все данные очевидно менять надо через модель, а не окольными путями.