2

I have a <v-text-field> which collects user e-mail address and I need to add ym-record-keys CSS class to <input> element according to Yandex Metrica guideline. So I tried to add it like this but it adds class to the parent div. How can I add ym-record-keys class to HTML input element?

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

html output

I need to achieve this output:

<input id="input-1055" type="email" class="ym-record-keys">
aydgn
  • 167
  • 1
  • 8

2 Answers2

1

I needed this ability as well because another plugin I was using expects a certain class to exist on my input elements.

In order to achieve this I created a simple wrapper around Vuetify's v-text-field that adds the ability to pass in a class to the input element:

Create a TextInput.vue component:

<script>
import { VTextField } from 'vuetify/lib';

export default {
  name: 'text-input',
  extends: VTextField,
  props: {
    inputClass: {
      note: 'A class that gets applied to the input',
    },
  },
  mounted() {
    // Applying the `class` to the input
    // element below if it has values
    const inputEl = this.$el.querySelector('input');

    if (this.inputClass) {
      inputEl.classList.add(this.inputClass);
    }
  },
};
</script>

Then used like this:

<text-input v-model="myModel" input-class="my-css-class" />

Which results in your input looking like this:

<input id="idGeneratedFromVuetify" type="text" class="my-css-class">

You can modify this to fit any other attributes you may want, or you could make it more dynamic if your use case needs that by using the spread operator with props.

maxshuty
  • 9,708
  • 13
  • 64
  • 77
-1

You can try the following to bind the class

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

or

:class="'ym-record-keys'"
Tipu Danny
  • 9
  • 5