javascript - 在 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()