Vue.js组件彼此不独立

Question

我希望该组件彼此独立并显示独立的计数器，但是显然不是正在发生的事情...

HTML：

<div id="app">
  <compteur> </compteur>
  <compteur> </compteur>
</div>

JS：

Vue.component('compteur',{
  template: '<div>{{cptr}}</div>',
  data(){
    return {
     cptr:0
    }
  },
  created: function() {
    self = this;
    setInterval(function() {
    self.cptr +=1;
  }, 1000);
}
 })


 vm = new Vue({
  el: "#app",
 });

最重要的是，如果我仅使用一个组件，则它的计数为1，这很好，但是如果我添加第二个组件，则第一个保持为0，第二个为2。

Answer 1

由于您没有声明self ，它将被视为window上的一个属性（如window.self ），因此两个组件实例都将访问window对象上的相同self属性。

尝试使用const或let声明self ：

let self = this;

或更妙的是，只需使用箭头功能即可自动绑定this ：

setInterval(() => {
  this.cptr += 1;
}, 1000);