Vuejs Datepicker 启用禁用的元素

Question

我有 2 个 <date-picker> 实例，其中第一个捕获开始日期 (starts_at)，第二个捕获结束日期 (ends_at)。

根据我的设计，我想禁用 ends_at 实例，然后在应用 starts_at 后重新启用它。

这是我的 starts_at 实例：

<date-picker v-model="starts_at" @input="enableEndsAt()" valueType="format"></date-picker>

这是我的 ends_at 实例：

<date-picker id="endsAt" v-model="ends_at" disabled @input="checkDate()" valueType="format"></date-picker>

这是我目前尝试过的方法。当您更改输入时，它会调用 enableEndsAt() 函数，如下所示：

enableEndsAt(){
  if(this.starts_at === "") {
    return
  }
  var element = document.querySelector('#endsAt')
  element.removeAttribute('disabled')
  console.log(element)
}

Answer 1

您可以使用禁用作为反应属性:

<date-picker id="endsAt" 
     v-model="ends_at" 
     :disabled="disableDatePicker" 
     @input="checkDate()" 
     valueType="format"></date-picker>

因此，要使用它，您可以在数据声明中创建一个属性 disableDatePicker，然后在您的方法中设置它：

data(){ return { disableDatePicker: false }},
...
methods: { ....
enableEndsAt(){
  if(this.starts_at === "") {
    return
  }
  this.disableDatePicker = true;
}

Answer 2

假设你的<date-picker>可以接受disabled属性，你可以简单地将它绑定到一个条件：

<date-picker id="endsAt" v-model="ends_at" :disabled="this.starts_at === ''" @input="checkDate()" valueType="format"></date-picker>

所以你不需要把 @input="enableEndsAt()" 放在你的 starts_at 日期选择器上，你也不需要 enableEndsAt() 函数

Vuejs Datepicker 启用禁用的元素

Vuejs Datepicker enable a disabled element

javascript

datepicker

vue.js