vue.js - How to add a property with the same name in VueJS? -

so using component framework vue2 named vuetify , having problem regarding class of input textbox.

so in textbox component, 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 want add class in text input because want date , using flatpickr plugin. name of class flatpickr. way use component this:

<v-text-input id="someid" label="somelabel" v-model="somemodel"></v-text-input> 

and if try add class random this:

<v-text-input id="someid" label="somelabel" v-model="somemodel" class="flatpickr"></v-text-input> 

the code isn't working because class goes div. checked code generated in elements of chrome , looks this:

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

as can see, class goes class of div. what's best way/trick add class in text input? appreciated.

to add class <div> tag design of vue, class added components rendered top level of element in template.

https://vuejs.org/v2/guide/class-and-style.html#with-components

if want apply css <input>, can do:

.random input {   /* css style */ } 

if want use flatpickr vuejs, can try use vue-flatpickr component, https://github.com/jrainlau/vue-flatpickr