Vue.js中@change方法仅在单个下拉框生效的问题求助

你现在的问题很明确：第一个日期选择框（birthday_day）没有绑定@change事件，所以只有第二个年份选择框变动时才会触发birthday_changed方法。

解决步骤很简单：给第一个<select>标签加上@change="birthday_changed"绑定即可，修改后的完整代码如下：

<select v-model="client.day" id="birthday_day" @change="birthday_changed">
     <option v-for="day in 31" :key=day :value="('0' + day).slice(-2)">{{ ("0" + day).slice(-2) }}</option>
</select>

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

birthday_changed: function () {
    alert('changed');
},

修改后两个下拉框在内容变动时，都会触发birthday_changed方法弹出提示。

另外补充一种思路：如果你的业务逻辑需要在client.day或client.year的数值发生变化（包括代码修改变量的情况）时都执行操作，也可以用Vue的watch监听这两个变量，无需依赖change事件：

watch: {
  'client.day': function() {
    this.birthday_changed();
  },
  'client.year': function() {
    this.birthday_changed();
  }
}

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