Quasar q-checkbox获取选中状态异常：event.target属性返回undefined

问题原因 #

Quasar的q-checkbox是封装后的组件，@click事件的event.target指向组件的外层DOM元素（而非原生<input>复选框），因此无法通过event.target.checked或event.target.value获取选中状态和对应值。

解决方案 #

方法1：改用@change事件（推荐）

q-checkbox的@change事件会直接返回选中状态，搭配你绑定的:val值就能获取完整信息，无需操作DOM：

<q-checkbox 
  @change="addServices(full_service, $event)"
  v-model="form.selected_full_services"
  :val="full_service" />

addServices(full_service, checked) {
  console.log('选中状态:', checked);
  console.log('对应值:', full_service);
  // 也可通过v-model数组直接判断当前选项是否选中
  const isSelected = this.form.selected_full_services.includes(full_service);
  console.log('通过v-model验证:', isSelected);
}

方法2：直接通过v-model绑定的数组判断状态

既然已经用v-model绑定了form.selected_full_services，可以直接在方法里判断当前选项是否在数组中，完全不需要依赖事件参数：

<q-checkbox 
  @click="addServices(full_service)"
  v-model="form.selected_full_services"
  :val="full_service" />

addServices(full_service) {
  const isChecked = this.form.selected_full_services.includes(full_service);
  console.log('选中状态:', isChecked);
  console.log('对应值:', full_service);
}

方法3：获取原生input元素（不推荐）

如果一定要保留@click事件，可以通过事件对象定位到原生input元素，但这种方法依赖组件DOM结构，可能随Quasar版本更新失效：

addServices(full_service, event) {
  const inputEl = event.target.closest('.q-checkbox').querySelector('input');
  console.log('选中状态:', inputEl.checked);
  console.log('对应值:', inputEl.value);
}

内容的提问来源于stack exchange，提问作者the_emotional_21