Vue.js中两个下拉框绑定同一change方法仅生效一个的解决办法

针对你遇到的问题，可按以下步骤排查和解决：

1. 检查v-model绑定变量的初始化 #

确保client对象在Vue的data选项中提前声明，且day和year属性有与下拉选项匹配的初始值。如果变量未初始化或初始值类型不匹配，可能导致部分下拉框的change事件不触发。

示例初始化代码：

data() {
  return {
    client: {
      day: '01', // 与第一个下拉框的字符串格式value匹配
      year: 1320 // 与第二个下拉框的数字格式value匹配
    }
  }
}

2. 统一v-model变量与option值的类型 #

Vue的v-model双向绑定对类型敏感，如果v-model绑定的变量类型与选项的:value类型不一致，可能会导致值更新异常，进而不触发change事件。

比如第二个下拉框的:value是数字类型（1320 + year），如果client.year是字符串类型，可将:value转为字符串统一类型：

<select v-model="client.year" @change="birthday_changed" id="birthday_year">
    <option v-for="year in 81" :key="year" :value="(1320 + year).toString()"> {{ 1320 + year }} </option>
</select>

同时将client.year初始化为字符串，比如"1320"。

3. 排查事件绑定与变量更新情况 #

可以修改birthday_changed函数，打印变量值来确认哪个下拉框的变量未更新：

birthday_changed: function () {
    console.log('当前日期:', this.client.day, this.client.year);
    alert('changed');
},

如果控制台能打印到对应变量的变化，说明事件已触发；如果某个变量未变化，回到前两步检查初始化和类型匹配问题。

4. 确认key值唯一性（可选） #

虽然你的代码中:key看起来没问题，但确保每个option的key值唯一是Vue列表渲染的最佳实践，避免因复用DOM导致的异常。

内容的提问来源于stack exchange，提问作者Peyman Khn