在我的Vue 3类人猿项目中，我有一个类似于此的组件:
<template>
<div class="q-pa-md">
<div id="myCustomLabel">{{ props.label }}</div>
<q-input
ref="myInput"
filled
v-model="name"
:rules="props.rules"
/>
</div>
</template>
每当字段无效时，它的 colored颜色 就会更改为红色.然而，我还需要将输入上方的"myCustomLabel"dis更改为红色. 有没有方法可以在字段通过规则验证或不通过规则触发函数，以便我也可以更改它？
在输入超过3个字符的情况下，这效果很好，我们有一个背景为negative的自定义标签，但考虑到isValid的外部验证，也可以使用其他任何内容.
<div id="q-app" style="min-height: 100vh;">
<div class="q-pa-md" style="max-width: 300px">
<p :class="!isValid && 'bg-negative'">Custom label</p>
<q-input
filled
v-model="model"
label="Type here"
bottom-slots
hint="Max 3 characters"
error-message="Please use maximum 3 characters"
:error="!isValid"
></q-input>
</div>
</div>
const { ref, computed } = Vue
const app = Vue.createApp({
setup () {
const model = ref('')
return {
model,
isValid: computed(() => model.value.length <= 3)
}
}
})
app.use(Quasar, { config: {} })
app.mount('#q-app')
这里是this part" rel="nofollow noreferrer">a codepen个带有视觉复制的文档，这取自this part个文档(外部验证).