Wie füge ich eine Eigenschaft mit demselben Namen in VueJS hinzu?

Question

Also verwende ich ein Komponenten-Framework für Vue2 mit dem Namen vuetify und ich habe ein Problem in Bezug auf die Klasse der Eingabetextbox.

So in der Textbox Komponente, der Code ist:

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

Jetzt möchte ich eine Klasse in der Texteingabe hinzuzufügen, weil ich es ein Datum sein soll, und ich bin mit dem flatpickr Plugin. Der Name der Klasse lautet flatpickr. So ist die Art, wie ich die Komponente verwenden, ist wie folgt:

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

Und wenn ich versuche, die Klasse zufällig ich so tun es hinzuzufügen:

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

Der Code funktioniert nicht, weil die Klasse geht zum div. Ich überprüfte die in den Elementen aus Chrom generierten Code und es sieht wie folgt aus:

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

Wie Sie sehen können, die Klasse auf die Klasse des div geht. Was ist der beste Weg/Trick, um eine Klasse in der Texteingabe hinzuzufügen? Jede Hilfe würde sehr geschätzt werden.

Answer 1

Sie können die gleiche CSS-Eigenschaft anwenden, durch den Pfad Ihrer Eingabe geben wie folgt vor:

.random input{ 
    height: etc; 
} 

bearbeiten

Vorausgesetzt, dass Sie auch ID des Eingabefeldes erhalten, gelten für die Klasse auf bestimmten Eingang, können Sie auch die ID verwenden:

.random #someid{ 
    height: etc; 
} 

Answer 2

die Klasse in <div> Tag hinzuzufügen ist das Design von Vue wird die in Komponenten hinzugefügte Klasse in die oberste Ebene des Elements in der Vorlage gerendert.

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

Wenn Sie die CSS <input> anwenden möchten, können Sie einfach tun:

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

Wenn Sie mit vuejs verwenden flatpickr möchten, können Sie versuchen, diese vue-flatpickr Komponente zu verwenden, https://github.com/jrainlau/vue-flatpickr