在VueJS中设置组件焦点

Question

这是我的代码。

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>

我现在用的是vuejs-datepicker成分，但我不能将焦点设置在日期选择器。

Answer 1

阅读完文档后，我推荐了一种不同的方法。 The datepicker has a disabled property。这允许您指定日期不能大于的from属性和日期不能早于的to属性。因此，如果您不希望用户选择大于其加入日期的出生日期，请将from属性设置为加入的日期。

在数据性能

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

而且在日期选择器，

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

这将阻止用户选择一个无效的日期。

这是example。

原始

看起来你正在使用renders a readonly input element我想到不能获得焦点的日期选择器。在任何情况下，包装输入的组件都不支持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> 

相反，您可以尝试显示日历。

this.$refs.dob.showCalendar()