如何将路由器 link 放入 Quasar 输入验证文本中？

Question

我正在使用 internal Quasar validation (:rules) 来验证输入表单。

它是一组规则，|| 的一侧是布尔函数，另一侧是错误验证文本。这是我在上面 link 编辑的文档中的示例：

<q-input
    ref="inputRef"
    filled
    v-model="model"
    label="Email"
    :rules="[val => !!val || 'Email is required']"
/>

现在我想在验证文本中包含一个路由器 link，但我不知道该怎么做。

例如：

<q-input
    ref="inputRef"
    filled
    v-model="model"
    label="Email"
    :rules="[!(await isEmailSignedUp(val)) ||
    'This email already exists. Please <router-link to='{ name: 'login' }'>login</router-link> or use a different email.',]"
/>

我将如何完成上述工作？

目前它只是将该模板代码打印为字符串。

Answer 1

Vue 不是基于字符串的模板引擎。当然这是行不通的。在这种情况下（需要将组件呈现为另一个组件的一部分（或替换一部分），总是寻找现有的插槽

在这种情况下 q-input 有一个 error 插槽 - docs。不幸的是，它不是一个作用域插槽（因此它不提供当前的错误消息），所以如果你有更多的规则（以及可能要显示的错误消息），你将需要更多的内部逻辑（可能使用 v-if 和模板参考）

请注意，为了使用此插槽，bottom-slots 道具必须出现在 q-input

<q-input
    ref="inputRef"
    filled
    v-model="model"
    label="Email"
    :rules="[!(await isEmailSignedUp(val)) || 'login']"
    bottom-slots  // <-- IMPORTANT!
>
  <template v-slot:error>
    <div>This email already exists. Please <router-link to='{ name: 'login' }'>login</router-link> or use a different email.</div>
  </template>
</q-input>

如何将路由器 link 放入 Quasar 输入验证文本中？

How do I put a router link inside the Quasar Input validation text?

vue.js

quasar-framework