Vue的JS方法與參數和setTimeout的

我想不通爲什麼這個代碼工作..Vue的JS方法與參數和setTimeout的

data: { 
    return { 
     userMinerals: 0, 
     mineralsLimit: 1000, 
     miners: 0, 
     superMiner: 0, 
     minerPrice: 10, 
     superMinerPrice: 100, 
     minersLimit: 10 
    } 
} 
methods: { 
    counter() { 
     setInterval(() => { 
      this.userMinerals += this.miners; 

      if(this.checkLimit(this.userMinerals, this.mineralsLimit)) { 
       this.userMinerals = this.mineralsLimit; 
      } 
     }, 100); 
    }, 
    addMiner() { 
     if (this.userMinerals >= this.minerPrice) { 
      this.miners += 1; 
      this.userMinerals -= this.minerPrice; 
      this.counter(); 
     } 
    } 
}

..但如果我嘗試把參數代入計數器（）的代碼停止工作

methods: { 
    counter(typeOfCredits) { 
     setInterval(() => { 
      typeOfCredits += this.miners; 

      if(this.checkLimit(this.userMinerals, this.mineralsLimit)) { 
       typeOfCredits = this.mineralsLimit; 
      } 
     }, 100); 
    }, 
    addMiner() { 
     if (this.userMinerals >= this.minerPrice) { 
      this.miners += 1; 
      this.userMinerals -= this.minerPrice; 
      this.counter(this.userMinerals); 
     } 
    } 
}

從控制檯我可以看到typeOfCredits得到遞增，因爲它應該但它不會更新視圖中的值。 Thx求助

來源

2017-08-29 Nes Suno

的觀點有'typeOfCredits'沒有反應的參考，我的意思是這是一個簡單的變量，它不是'屬性data'。 – yuriy636

'typeOfCredits'不是數據屬性。你需要在'counter'方法中使用'this.userMinerals' – thanksd

所以我應該使用數據屬性作爲函數參數？ –

你不能引用一個參數，並期望它在外面改變，但是你可以傳遞一個引用到一個可以改變外面的東西的對象。

var $this = this; 
this.counter({ 
    get() { return $this.userMinerals }, 
    set(val) { $this.userMinerals = val } 
});

，然後在櫃檯使用這樣

counter(typeOfCredits) { 
     setInterval(() => { 
      typeOfCredits.set(typeOfCredits.get() + this.miners); 

      if(this.checkLimit(this.userMinerals, this.mineralsLimit)) { 
       typeOfCredits.set(this.mineralsLimit); 
      } 
     }, 100); 
    },

jsfiddle

來源

2017-08-29 18:09:32

Thx這非常清楚 –

typeOfCredits是該函數的一個參數。參數按值傳遞。修改它就像修改一個局部變量。

來源

2017-08-29 15:11:41

Vue的JS方法與參數和setTimeout的

回答

相關問題