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）进行查找，然后两个组件实例将访问相同的self window对象上的属性。

尝试使用self或const声明let：

let self = this;

或者更好的是，只需使用arrow function即可自动绑定this：

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

Vue.js组件彼此不相互独立

1 个答案: