Блог

Шаблон Vue:

 <v-flex>
 <v-select
   label="Day"
   :items="daysInMonth"
   v-model="selectedDay"
  />
</v-flex>
<v-flex>
  <v-select
   label="Month"
   :items="months"
   v-model="selectedMonth"
  />
</v-flex>
<v-flex>
  <v-select
   label="Years"
   :items="years"
   v-model="selectedYear"
  />
</v-flex>
 

Я работаю над компонентом выбора даты v-select . Он работает нормально, но я не понимаю поведения, когда у меня есть случай для оценки количества дней в месяц / год.

So daysInMonth — это вычисляемое свойство, которое вернет количество дней, заданное selectedMonth amp; selectedYear .

Примерный случай, daysInMonth есть [1, 2, 3, ..., 29] и selectedDay есть 29 , но сразу после новой оценки daysInMonth , например, скажем [1, 2, 3, ..., 28] , selectedDay значение моих данных сохраняется, т.Е. Все еще отображается 29 в инструментах отладки Vue, но не в пользовательском интерфейсе.

Чего мне здесь не хватает? Я хочу, чтобы значение selectedDay обновлялось, если оно не имеет значения, существующего в элементах, т.Е. daysInMonth .

Спасибо!

Вы можете использовать watch daysInMonth :

 watch: {
  daysInMonth(val) {
    this.selectedDay = val.includes(this.selectedDay) ? this.selectedDay : 1;
  }
}
 

Это приведет к сбросу значения selectedDay на 1, если его нет в новом daysInMonth массиве.