在类星体中验证带有切换按钮的表单

Question

我想通过提交q-btn来验证两个切换按钮的形式。

我总是得到错误信息。我做了很多研究，但没能找到解决办法。是的，我知道，我不是最好的程序员。

我怎样才能得到最简单的方法来显示一个简单和简短的验证?谢谢你。

<template>
<div padding>
<q-form @submit="onSubmit" class="q-gutter-md">
<div id="q-app">
<div class="q-pa-md row items-start q-gutter-md">
<q-card class="link-card">
<q-card-section class="card-title">Check:</q-card-section>
<q-card-section>
<p>1. Are you okay?</p>
<q-btn-toggle type="submit" v-model="question_1" class="my-custom-toggle" no-caps rounded unelevated
toggle-color="primary" color="white" text-color="primary" :options="[
{ label: 'yes', value: 'one' },
{ label: 'no', value: 'two' },
]"></q-btn-toggle>
</q-card-section>
<q-separator inset></q-separator>
<q-card-section>
<p>2. Did you sleep enough?</p>
<q-btn-toggle v-model="question_2" class="my-custom-toggle" no-caps rounded unelevated
toggle-color="primary" color="white" text-color="primary" :options="[
{ label: 'yes', value: 'one' },
{ label: 'no', value: 'two' },
]"></q-btn-toggle>
</q-card-section>
<q-btn label="Check answers" class="full-width" color="primary" type="submit"
@click="confirm = true"></q-btn>
</q-card-section>
<q-dialog v-if="question_1 === true && question_2 === true">
<q-card class="my-card">
<q-card-section class="bg-secondary text-white">
<q-avatar size="lg" class="align-center" icon="error_outline" color="primary"
text-color="white"></q-avatar>
<div class="text-h6">YOU ARE OKAY</div>
</q-card-section>
<q-card-actions align="around">
<q-btn flat @click="$router.push('/termin')">Weiter</q-btn>
<q-btn flat v-close-popup>Abbrechen</q-btn>
</q-card-actions>
</q-card>
</q-dialog>
<q-dialog v-if="question_1 === false && question_2 === false">
<q-card class="my-card">
<q-card-section class="bg-secondary text-white">
<q-avatar size="lg" class="align-center" icon="error_outline" color="primary"
text-color="white"></q-avatar>
<div class="text-h6">YOU ARE NOT OKAY</div>
</q-card-section>
<q-card-actions align="around">
<q-btn flat @click="$router.push('/termin')">Weiter</q-btn>
<q-btn flat v-close-popup>Abbrechen</q-btn>
</q-card-actions>
</q-card>
</q-dialog>
</q-card>
</div>
</div>
</q-form>
</div>
</template>

Answer 1

<template>
<q-btn-toggle ref="mytoggle" type="submit" v-model="question_1" class="my-custom-toggle" no-caps rounded unelevated
toggle-color="primary" color="white" text-color="primary" :options="[
{ label: 'yes', value: 'one' },
{ label: 'no', value: 'two' },
]"></q-btn-toggle>
</template>
<script>
import { ref } from 'vue'
import { Notify } from 'quasar'
let mytoggle = ref(null)
function onSubmit () {
if (mytoggle.value !== true) {
Notify.create({
color: 'negative',
message: 'NOOOOOOOOOOOOO !'
})
}
}

Answer 2

你可以使用类星体场控制，就像这样:

<q-field label="Are you okay?" v-model="question_2" stack-label :rules="[v=>!!v || 'The answer is required.']">
<template v-slot:control>
<q-btn-toggle v-model="question_2" class="my-custom-toggle" no-caps rounded unelevated
toggle-color="primary" color="white" text-color="primary" :options="[
{ label: 'yes', value: 'one' },
{ label: 'no', value: 'two' },
]">
</q-btn-toggle>
</template>
</q-field>