javascript - 在数据问题 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