javascript - v-on :change event is not fired when javascript is used to increase value is Vue

Question

我正在为工作构建一个退休收入计算器，并第一次开始使用 Vue 来集成双向数据绑定(bind)。我已经开发了计算器的大部分功能，但是由于不熟悉 Vue，我在将一些业务规则实现到计算器中时遇到了一些麻烦。我完成的代码可以在https://jsfiddle.net/9f542pqs/查看.以下是我需要应用的业务规则:

• 用户可以选择 35-70 岁之间的当前年龄。
• 可以选择的最低“贡献至”年龄是 65 岁。
• 可选择的最大“贡献至”年龄为 85 岁。
• 用户的贡献时间从最少 15 年到最多 30 年不等。
• 考虑到上述规则，当用户选择 35-51 岁之间的任何一个当前年龄时，可以为“贡献至”年龄选择的最小年龄为 65 岁，并且应该禁用减少该年龄的按钮。
• 如果用户选择的贡献年龄与他们选择的当前年龄相差 15 岁，则应禁用用于减少“贡献至”年龄的按钮。
• 这同样适用于当年龄相差 30 岁时，应禁用增加“贡献至”年龄的按钮。
• 要禁用按钮时，将应用 disabled 属性以及“disabled”类。

我已尝试将 v-on:change 监听器附加到用于存储“contribute until”年龄的输入，然后检查业务规则以设置控制禁用的 bool 值增加/减少按钮的状态，但事件永远不会为我触发。当更新“contribute until”年龄的值时，如何实现这样的功能来禁用增加/减少按钮？

Answer 1

change 事件只会在输入的值被直接编辑时触发。当您通过下拉菜单或 +/- 按钮更改时，它不会触发。

好消息是，您并不是真的想要来自 DOM 的 change 事件。您已将值绑定(bind)到一个变量，您想要注意的是该变量的值何时发生变化。这就是watch是为了。你会做类似的事情:

...(in your Vue spec)...
watch: {
  age: function (newValue, oldValue) {
    validate(newValue);
  }
},
...

(另请注意:由于您使用的是 v-model="age"，因此您不需要 value="{{age}}")

我注意到您将 Vue 分别应用于各种 DOM 元素。您可能希望这些不同的项目相互了解。您可能应该为整个应用程序调用一次 Vue，并且可能让每个子单元都由一个组件表示。

不要将 Vue 视为一种添加双向绑定(bind)的方式，而是将其视为一种将 DOM 从您的编程中分离出来的方式。您将应用程序状态纯粹作为数据来处理，而 Vue 确保 DOM 反射(reflect)该状态。