观看 属性 中的数据问题 vue2JS

Question

嘿，我目前正在尝试观察用户在输入中更改的数据对象中的数字，然后将其乘以 4。我的代码是：

new Vue({
  el: '#app',
  data: {
    numberWatched: 1,
    numberAfter: 1
  },
  watch: {
    numberWatched: (val) => {
      this.numberAfter = this.numberWatched * 4;
    }
  }
})

numberWatched 与输入 v-model 相同，因此用户实际上可以将其从 UI 更改为

<div id="app">
  <input type="number"
         v-model="numberWatched"
         min="0"
         />
  <p>
    {{ numberAfter }}
  </p>
</div>

这不行，numberAfter 没有乘以 4。如何解决？ demo

Answer 1

首先，在使用箭头函数时不要使用this。因为vuejs认为this指的是函数而不是vue js。所以，将您的监视对象更改为：

  watch: {
    numberWatched: function (val) {
      this.numberAfter = this.numberWatched * 4;
    }
  }

检查工作 demo