在 Quasar 中使用切换按钮验证表单

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 !'
          })
        }

}