VueJS - 有時會出錯「Uncaught TypeError：無法讀取未定義的屬性'進程'

Question

我正在使用Vue.JS和Laravel 5.2進行項目。

這是一個訓練詞彙的程序。所以在我的Vue-Data-Object中有一個包含wordpairs的數組。每個wordpair被存儲作爲對象：

"words": [ 
    { 
     "lang1": "Haus", 
     "lang2": "house", 
     "lang1_hint": "", 
     "lang2_hint": "", 
     "image_url": "", 
     "tries": 0, 
     "fails": 0, 
     "process": 1 
    }, 
    { 
     "lang1": "Feuer", 
     "lang2": "fire", 
     "lang1_hint": "", 
     "lang2_hint": "", 
     "image_url": "", 
     "tries": 0, 
     "fails": 0, 
     "process": 5 
    }, 
    ... 
] 

現在我有一個函數，該函數數組的長度，產生一個隨機數，並返回一個隨機數出數組的上面：

getRandomWord: function(){ 
    var i = Math.floor((Math.random() * this.words.length) + 1); 
    if(this.words[i].process == 5){ 
     return this.getRandomWord(); 
    } else { 
     return { 
      index: i, 
      content: this.words[i] 
     } 
    } 
} 

大部分沒有問題。但有時，出現錯誤時的說法：

Uncaught TypeError: Cannot read property 'process' of undefined 

控制檯說，在我的getRandomWord（）if(this.words[i].process == 5)的，如果條件發生錯誤。

任何想法爲什麼？過程值始終爲1,2,3,4或5.

感謝至此！

Answer 1

Javascript數組的第一個索引是0，因此數組的最後一個索引是array.length - 1。您的生成指數代碼：

Math.floor((Math.random() * this.words.length) + 1); 

有時會產生length的指數 - 該指數不存在。刪除+1，你應該很好。

Answer 2

Im相當肯定，你有問題，在這裏

var i = Math.floor((Math.random() * this.words.length) + 1); 

刪除+1，你要善於go.Remember陣列，指數開始0

Answer 3

的錯誤意味着this.words[i]是未定義一些i。

你應該寫

var i = Math.floor((Math.random() * this.words.length));