How to add a property with the same name in VueJS?

Question

So I am using a component framework for Vue2 named vuetify and I am having a problem regarding the class of the input textbox.

So in the textbox component, the code is:

<template lang="pug">
  div(
    class="input-group"
    v-bind:class="classes"
  )
    label(
      v-bind:for="id"
      v-html="label"
    )
    input(
      v-bind:id="id"
      v-bind:name="name"
      v-bind:placeholder="placeholder"
      v-bind:required="required"
      v-bind:type="type"
      v-bind:value="inputValue"
      ref="input"
    )
</template>

Now I want to add a class in the text input because I want it to be a date and I am using the flatpickr plugin. The name of the class is flatpickr. So the way I use the component is like this:

<v-text-input id="someID" label="SomeLabel" v-model="someModel"></v-text-input>

And if I try to add the class random I do it like this:

<v-text-input id="someID" label="SomeLabel" v-model="someModel" class="flatpickr"></v-text-input>

The code isn't working because the class goes to the div. I checked the code generated in the elements of chrome and it looks like this:

<div class="input-group flatpickr" data-v-3eb87e8e="">
   <label for="SomeLabel">SomeLabel</label>
   <input id="someID" type="text">
</div>

As you can see, the class goes to the class of the div. What's the best way/trick to add a class in the text input? Any help would be much appreciated.

what do you mean the code isn't working? what's your expectation? to select the element with JS? or you just want to change the css style? — Sabrina Luo
do you mind to introduce the external component? github.com/jrainlau/vue-flatpickr — Sabrina Luo
@Sabrina that component has it's own datepickr component and I can't properly copy the design of my input text that's why im using the main library instead — wobsoriano

Sabrina Luo Sabrina Luo · Accepted Answer · 2017-02-15T03:24:36

to add the class into <div> tag is the design of Vue, the class added into components will be rendered into the top level of the element in the template.

https://vuejs.org/v2/guide/class-and-style.html#With-Components

If you want to apply the css to <input>, you can simply do:

.random input {
  /* your css style */
}

If you want to use flatpickr with vuejs, you can try to use this vue-flatpickr component, https://github.com/jrainlau/vue-flatpickr

How to add a property with the same name in VueJS?

2 Answers