监听Quasar上的输入验证事件

Question

在我的 Vue3 Quasar 项目中，我有一个与此类似的组件：

<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>

只要字段无效，它就会将其颜色更改为红色。但是我还需要将输入上方的“myCustomLabel”div 更改为红色。 有没有什么方法可以在字段经过验证或未通过规则时触发函数，以便我也可以更改？

Answer 1

这个效果很好

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

这里是一个代码笔，带有视觉再现，这取自文档的这部分。