Vuetify 如何将 CSS 类添加到 HTML <input>答案

【问题标题】：Vuetify how to add CSS class to HTML <input>Vuetify 如何将 CSS 类添加到 HTML <input>
【发布时间】：2023-03-09 08:46:01
【问题描述】：

我有一个收集用户电子邮件地址的<v-text-field>，我需要根据Yandex Metrica guideline将ym-record-keys CSS类添加到<input>元素。所以我尝试像这样添加它，但它会将类添加到父 div。如何将ym-record-keys 类添加到 HTML 输入元素？

<v-text-field
  v-model="item.customer.mail"
  type="email"
  :rules="emailRules"
  hide-details="auto"
  class="ym-record-keys"
  solo 
>
</v-text-field>

我需要实现这个输出：

<input id="input-1055" type="email" class="ym-record-keys">

【问题讨论】：

只能使用 jquery 或 js。 Vuetify 还没有这样的选项。
@FatimaMazhit 知道如何在 Vue 中使用 JavaScript 做到这一点吗？
document.querySelector("div.ym-record-keys input[type='email']").classList.add("ym-record-keys"); 那样的东西
我可以工作，但这不是我希望找到的解决方案。还是谢谢。
我知道我希望 vuetify 开发人员会添加该功能。

标签： css vue.js vuetify.js yandex-metrika

【解决方案1】：

你可以尝试以下方法来绑定类

:class=["ym-record-keys"]

或

:class="'ym-record-keys'"

【讨论】：

两者都不起作用。我得到相同的输出。 @tipu 丹尼