如果项目已更新，则从 v-select 更新 v-model答案

【问题标题】：Update v-model from v-select if items are updated如果项目已更新，则从 v-select 更新 v-model
【发布时间】：2021-03-19 01:22:56
【问题描述】：

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 数据值被保留，即仍然显示 @987654333 @ 在 Vue 调试工具上，但不在 UI 上。

我在这里缺少什么？如果项目中不存在值daysInMonth，我希望更新值selectedDay。

谢谢！

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

您可以在daysInMonth 上使用watch：

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

如果selectedDay 不在新的daysInMonth 数组中，这会将selectedDay 重置为1。

【讨论】：