Vue中的自动加载计数器

Question

我对Vue很陌生。我想做的是..当加载HTML时，计时器将自动开始每秒计数。我的代码显示在下面，我从{{counter}}得到的值始终为0。它根本没有计数。请任何人给我一些建议。预先感谢。

在HTML中

<div id="app">
  <h3>You have opened this page for {{ counter }} seconds.</h3>
</div>

在JS中，

const app = new Vue({
  el: '#app',
  data: { counter: 0 },
  computed: {
    timer: function() { setInterval(this.tikTok, 1000); },
    tikTok: function() { ++this.counter; }
  }
});

Answer 1

您的代码有两个问题，但值得庆幸的是，它们很容易解决：

---

问题1：this处理程序中的词法setInterval()

使用setInterval(this.tikTok, 1000);时，tikTok方法将失去对词法this（即您的VueJS应用）的引用。要解决此问题，您可以：

• 使用ES6箭头功能，即setInterval(() => this.tikTok(), 1000);
• 或使用.bind(this)传递内容，即setInterval(this.tikTok.bind(this), 1000);

---

问题2：timer和tikTok应该是方法，而不是计算的道具

timer和tikTok都不应该是计算道具：它们将永远不会被调用。相反，您应该简单地将它们定义为methods，然后在安装和渲染组件时调用timer：

const app = new Vue({
  el: '#app',
  data: { counter: 0 },
  methods: {
    timer: function() { setInterval(this.tikTok, 1000); },
    tikTok: function() { ++this.counter; }
  },
  mounted: function() {
      this.$nextTick(() => {
          this.timer();
      });
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h3>You have opened this page for {{ counter }} seconds.</h3>
</div>