Set Fokus für Komponente in VueJS

Question

Dies ist mein Code.

import Datepicker from 'vuejs-datepicker' 
 

 
if(this.DOB > this.dateOfJoin){ 
 
    alert("DOB should not be greater than Date of Join.asd.!") 
 
    this.$refs.dob.focus(); 
 
}

<div class="form-group"> 
 
    <label class="col-sm-3 control-label">Date of Birth</label> 
 
    <datepicker v-model="DOB" name="DOB" ref="dob" class="required"></datepicker> 
 
</div>

ich die vuejs-datepicker Komponente verwenden, aber ich kann Fokus auf den Datepicker nicht gesetzt.

Answer 1

Nach dem Lesen der Dokumente empfehle ich einen anderen Ansatz. The datepicker has a disabled property. Auf diese Weise können Sie eine from-Eigenschaft angeben, für die das Datum nicht größer sein kann, und eine to -Eigenschaft, für die das Datum nicht früher sein kann. Wenn Sie also nicht möchten, dass Benutzer ein Geburtsdatum auswählen, das größer ist als das Datum, an dem sie sich angemeldet haben, legen Sie die Eigenschaft from auf das Datum fest, dem Sie beigetreten sind.

In Dateneigenschaften

data:{ 
    dobDisabled:{ from: <date joined> } 
} 

Und auf dem picker,

<datepicker :disabled="dobDisabled"></datepicker> 

, dass die Nutzer von der Kommissionierung ein ungültiges Datums verhindern.

Hier ist ein example.

Original-

Es sieht aus wie die Datepicker Sie renders a readonly input element verwenden, die ich erwarte nicht scharf eingestellt werden kann. In jedem Fall unterstützt die Komponente, die die Eingabe umschließt, keine Methode focus.

<input 
    :type="inline ? 'hidden' : 'text'" 
    :class="[ inputClass, { 'form-control' : bootstrapStyling } ]" 
    :name="name" 
    :id="id" 
    @click="showCalendar" 
    :value="formattedValue" 
    :placeholder="placeholder" 
    :clear-button="clearButton" 
    :disabled="disabledPicker" 
    :required="required" 
    readonly> 

Stattdessen können Sie versuchen, den Kalender anzuzeigen.

this.$refs.dob.showCalendar()