类星体q-checkbox得到目标值，如果选中

Question

我正在使用QUASAR，我想获得q复选框的状态，无论它是否被选中。我使用了event.target.checked和event.target.value，但它们都是未定义的。

我的复选框:

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

我的方法:

addServices(full_service, event) {
console.log(event.target.checked)
console.log(event.target.value)
}

控制台:

output undefined

Answer 1

如果我理解正确的话，也许你根本不需要函数:

const { ref } = Vue
const app = Vue.createApp({
setup () {
const full_services = ref( ['aaa', 'bbb', 'ccc'] )
const form = ref( { selected_full_services: [] } )
return { form, full_services }
}
})
app.use(Quasar)
app.mount('#q-app')

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/quasar@2.10.1/dist/quasar.prod.css" rel="stylesheet" type="text/css">
<div id="q-app">
{{form}}
<div v-for="full_service in full_services">
<q-checkbox
:label="full_service"
v-model="form.selected_full_services"
:val="full_service" />
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@2.10.1/dist/quasar.umd.prod.js"></script>