如何在 Quasar 出错期间更改输入的颜色？

Question

我是 Quasar 的新手，当规则出现错误时，我试图覆盖当前的背景颜色，但没有成功，我认为这是由于加载 CSS 后实施的 CSS 造成的。

我现在的代码。

<q-input :style="{ width: '100%' }" standout="bg-dark text-white"
        :input-style="{ color: 'white', fontSize: '1.2em' }" color="primary" label="Username" roun
        v-model="props.username" :rules="usernameRules" />

我尝试以 CSS 中的课程为目标，但没有成功。 任何帮助表示赞赏！

Answer 1

<template>
<form @submit.prevent.stop="onSubmit" @reset.prevent.stop="onReset" class="q-gutter-md">
<q-input ref="usernameRef" :standout="mystandout" color="primary" label="Username"  v-model="username" :rules="usernameRules" />

</template>
<script setup>

let mystandout = ref('bg-dark text-white')
let usernameRef = ref(null)
function onSubmit () {
usernameRef.value.validate()
if (usernameRef.value.hasError) {
          mystandout.value = 'bg-red text-white'
        }
}

我想是这样的