如果項目已更新，則從 v-select 更新 v-model

Question

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開發日期選擇器組件。 它工作正常，但我不理解我有一個案例來評估一個月/一年中的天數的行為。

所以daysInMonth是一個計算屬性，它將返回給定selectedMonth和selectedYear的天數。

示例情況， daysInMonth有[1, 2, 3, ..., 29]並且selectedDay是29 ，但是在daysInMonth的新評估之后，即說[1, 2, 3, ..., 28] ，我的selectedDay數據值被保留，即在 Vue 調試工具上仍然顯示29 ，但在 UI 上沒有。

我在這里想念什么？ 如果項目中不存在該值，我希望更新selectedDay值，即daysInMonth 。

謝謝！

Answer 1

您可以在daysInMonth上使用watch ：

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

如果 selectedDay 不在新的daysInMonth數組中，這會將selectedDay重置為 1。