Как добавить свойство с тем же именем в VueJS?

Question

Итак, я использую компонентную инфраструктуру для Vue2 с именем vuetify, и у меня возникла проблема с классом входного текстового поля.

Таким образом, в компоненте текстового поля, код:

<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> 

Теперь я хочу, чтобы добавить класс в вводе текста, потому что я хочу быть датой и я использую flatpickr плагин. Имя класса - flatpickr. Так как я использую компонент, как это:

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

И если я пытаюсь добавить класс случайным Я делаю это так:

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

код не работает, потому что класс идет к div. Я проверил код, сгенерированный в элементах хрома и это выглядит следующим образом:

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

Как вы можете видеть, класс переходит к классу дел. Каков наилучший способ/трюк, чтобы добавить класс в текстовый ввод? Любая помощь приветствуется.

Answer 1

Вы можете применить то же CSS свойство, давая путь вашего вклада, как следующее:

.random input{ 
    height: etc; 
} 

Редактировать

Учитывая, что вы также получаете идентификатор ввода, чтобы применить класс на конкретных входных данных, вы можете также использовать идентификатор:

.random #someid{ 
    height: etc; 
} 

Answer 2

добавить класс в <div> тег дизайн Vue, класс, добавленный в компоненты, будет отображаться на верхнем уровне элемента в шаблоне.

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

Если вы хотите применить CSS к <input>, вы можете просто сделать:

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

Если вы хотите использовать flatpickr с vuejs, вы можете попробовать использовать этот vue-flatpickr компонент, https://github.com/jrainlau/vue-flatpickr