V-on:如果使用javascript来增加值是Vue，则不会触发change事件。

Question

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

• 用户可以选择他们当前的年龄范围从35-70。
• 可以选择的最低“贡献”年龄为65岁。
• 可在85岁内选定的“贡献到”的最大年龄。
• 用户可以在任何地方做出贡献，从至少15年到最长30年不等。
• 考虑到上述规则，当用户选择当前年龄为35-51岁时，可以为“缴费”年龄选择的最低年龄为65岁，降低此年龄的按钮应被禁用。
• 当用户选择的缴费年龄与他们选择的当前年龄之间的差异为15岁时，应禁用“缴费到”年龄的按钮。
• 同样适用于当年龄之间的差异是30岁时，然后按钮增加“贡献，直到”年龄应该被禁用。
• 当要禁用按钮时，将应用禁用属性以及“禁用”类。

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

Answer 1

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

好消息是，您并不需要DOM中的change事件。您已经将该值绑定到一个变量，您需要注意的是该变量的值何时发生变化。这就是观看的作用。你会做这样的事情：

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

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

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

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