如何在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> 

正如你可以看到，類轉到類的div。在文本輸入中添加課程的最佳方式/技巧是什麼？任何幫助將非常感激。

Answer 1

您可以將相同的CSS屬性，通過給你輸入的路徑類似如下：

.random input{ 
    height: etc; 
} 

編輯

既然你也越來越輸入框的ID，以應用在特定的輸入級，你也可以使用id：

.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 */ 
} 

如果你想與vuejs使用flatpickr，你可以嘗試使用這個vue-flatpickr組件，https://github.com/jrainlau/vue-flatpickr