Vuejs Datepicker включить отключенный элемент

Question

У меня есть 2 экземпляра <date-picker>, в которых первый фиксирует дату начала (starts_at), а второй фиксирует дату окончания (ends_at).

Согласно проекту I имейте в виду, я хотел бы отключить экземпляр 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

Вы можете использовать disabled как реактивное свойство:

<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() функция