値が更新されているにもかかわらず、Vueオブジェクトが更新された値を返さない

Question

Vue.jsのテストを書いていますが、いくつかの小道具をページング用に変更したときに、コンポーネントが正しく更新されます。

コンポーネントをconsole.logにすると、正しく更新された値が表示されますが、文字通りその属性を取得しようとすると古い値と古い値が返されます。私が何を意味するか参照するには、次のスクリーンショットのrangeListで見て：あなたは、何がこの出力を生成しているかを確認するよう

ここでは私のコードです。コンポーネントが作成されている、とpages属性の変更：

createListOfRanges() { 
    let range = []; 
    for(let i = 0; i < this.pages; i++) { 
    range.push(i); 
    } 
    this.rangeList = []; 
    while(range.length > 0) { 
    this.rangeList.push(range.splice(0, this.rangeLength)); 
    } 
    this.correctLastRange(); 
},  

最後に、この関数が呼び出された二つの場所があります。ここでは

pagComp.$refs.component.limit = 10; 
pagComp.$refs.component.pages = 145; 
console.log(pagComp.$refs.component); 
console.log('RangList: ' + pagComp.$refs.component.rangeList.length); 

はrangeListを変更するコードです。ここウォッチャーは、次のとおりです。

watch: { 
pages(val) { 
    this.createListOfRanges(); 
} 

}、

Answer 1

上記の回答は高く評価されていますが、問題の内容ではありません。

問題はVueのライフサイクルにありました。私は100％確信しているわけではありませんが、ページ変数とリミット変数が変更されたときには、ページウォッチャー（上の図）が実行され、コンポーネントを更新する別の瞬間があります。だから、それは私のテストでは表示されませんでした。だから私がやったのはnextTickのように使って、問題を修正した。

pagVue.limit = 10; // limit and pages change together every time automatically 
pagVue.pages = 145; 
Vue.nextTick(() => { 
    expect(pagination.rangeList.length).toBe(25); 
}) 

Answer 2

私はあなたのコードのこの部分でいくつかの問題を参照してください。

while(range.length > 0) { 
    this.rangeList.push(range.splice(0, this.rangeLength)); 
} 

range.splice(..)はthis.rangeList

に押し込んなっている配列を返します

これについては1分ほど忘れてしまいます。次の例を参照してください。

上記のように、スプライスは要素ではなく配列を返します。上記の例と同じです：

x = [1, 2, 3, 4] 
y = [10, 11] 
y.push(x.splice(0, 2)) 

yの値を確認してください。それは[10, 11, [1, 2] ]になります。別の配列内の配列です。ここではあまり意味がありません。上記のxとyのテストは、デベロッパーコンソールで直接行うことができます。あなたのケースで

、あなたxはcreateListOfRangesメソッド内のローカルrangeアレイであることを起こる、あなたはあなたのy Vueのコンポーネントに属するthis.rangeListあります。

あなたはその地域の周辺のアプリロジックをチェックして、それが本当にやりたいことを確認できますか？

Vue.jsアプリケーションをデバッグするために、あなたはまた、Vueのは、デベロッパーツールが必要ですhttps://github.com/vuejs/vue-devtoolsを - @Maniはあなたに問題を与えるコードの行を右ですが、それはconsole.log()

Answer 3

よりもはるかに優れていますがrangeListにあなたのプッシュです。

createListOfRanges() { 
    let range = []; 
    for(let i = 0; i < this.pages; i++) { 
    range.push(i); 
    } 

    this.rangeList = []; 
    while(range.length > 0) { 
    this.rangeList.push(range.splice(0, this.rangeLength)); 
    } 
    this.correctLastRange(); 
}, 

スプライスの結果をプッシュすると、範囲内のすべての要素を持つ単一の要素が作成されます。

はあなたの関数は、それは、簡単でない限りrangeListに直接for(let i = 0; i < this.pages; i++) {i値を押すことで簡単にすることができますが

this.rangeList.push(range.shift()); 

にそれを変更してみてください。

このJSFiddleは、私が話していることを示しています。