向 q-input 添加一个 id 属性

Question

假设我有以下 q-input:

<q-input
    v-model="form.email"
    inverted-light
    color="white"
    stack-label="Email:"
    type="email"
    @blur="$v.form.email.$touch"
    :error="$v.form.email.$error"/>

我希望能够做到，如果电子邮件的域是 mydomain.com，则表单操作将更改为另一个网站（没有 csrf 保护）和 POST将发布到该网站而不是主要网站。

为此，我想我可以使用 jQuery。例如。 $('#email').val().replace(/^.+@/, '') == 'mydomain.com' 然后更改表单操作并提交。

唯一的问题是：我不知道如何在 q-input 上设置 id 属性。

有什么想法吗？

Answer 1

从早期的 Quasar 1.4.2（今年 11 月）开始，您可以使用 "for" 属性在 q-input 生成的结果 html 上指定 id 值（见行为属性的结尾：https://quasar.dev/vue-components/input#QInput-API）。

因此，例如，您可以添加 for="myInputId":

<q-input
    v-model="form.email"
    inverted-light
    color="white"
    stack-label="Email:"
    type="email"
    @blur="$v.form.email.$touch"
    :error="$v.form.email.$error"
    for="myInputId"
/>

值为 "myInputField" 的 id 属性将最终出现在 HTML 中的结果 <input> 元素上。

Answer 2

不在元素中使用“for”让我很头疼，因为 Jest 快照生成了随机 ID

向 q-input 添加一个 id 属性

adding an id attribute to q-input

quasar-framework