v-on：当javascript用于增加值时，不会触发更改事件是Vue

Question

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

• 用户可以选择当前年龄范围为35-70。
• 最低＆＃34;贡献直到＆＃34;可以选择的年龄是65岁。
• 最大值＆＃34;贡献直到＆＃34;年龄可在85岁时选择。
• 用户可以贡献从最少15年到最多30年的任何地方。
• 考虑到上述规则，当用户选择他们当前的年龄为35-51岁时，可以为＆＃34;选择的最小年龄贡献到＆＃34;年龄为65岁，应禁用减少此年龄的按钮。
• 当用户选择贡献的年龄与他们选择作为当前年龄的年龄之间的差异为15年时，减少＆＃34;的按钮会直到＆＃34;年龄应该禁用。
• 这同样适用于年龄差异为30年的情况，然后按钮增加＆＃34;贡献直到＆＃34;年龄应该被禁用。
• 当要禁用某个按钮时，已禁用的属性以及一类“已禁用”按钮。将被应用。

我尝试将v-on:change侦听器附加到用于存储＆＃34;贡献的输入，直到＆＃34;年龄，然后检查业务规则，设置控制增加/减少按钮的禁用状态的布尔值，但事件永远不会触发我。当＆＃34;的值为＆＃34;时，如何实现此功能以禁用增加/减少按钮？年龄更新？

Answer 1

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

好消息是，你真的不想从DOM获得change事件。您已将值绑定到变量，并且您要注意的是该变量的值何时更改。这就是watch的用途。你会做类似的事情：

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

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

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

认为Vue不是添加双向绑定的一种方式，而是将DOM与编程隔离开来的一种方式。您只将应用程序状态作为数据处理，Vue确保DOM反映该状态。