2016-12-30 45 views
2

私はユーザーが顧客にメモを取ることができるタイムラインに取り組んでいます。 その月に属するノートのグループの前に月と年を表示したいと思います。例えばVuejs:変数に値を代入するときの無限ループ

February 2016 
"Note 4" - 2016-02-15 
"Note 3" - 2016-02-05 

January 2016 
"Note 2" - 2016-01-28 
"Note 1" - 2016-01-12 

私は自分のノートを表示するためにVueJSを使用するように、私は月が「currentMonth」という変数に保存された月と異なっていたかどうかをチェックするために、各音符をテストしたかったです。

<div v-for="note in notes | orderBy 'date' -1" > 
    <div v-if="isNewMonth(note)"><% currentMonth %></div> 
    <div style="background-color: #<% note.type.color %>; margin-bottom: 10px; border-left: solid #<% note.type.border_color %> 5px; padding-left: 5px;"> 
     <p class="noteMessage"><% note.message %><p> 
     <p class="noteInfos">Par <% note.author %> le <% note.date %></p> 
    </div> 
</div> 

と関数isNewMonth: は、だから私は「isNewMonth」と呼ばれる機能で値を確認するために私のディスプレイにV-IFを使用

isNewMonth: function(note) { 
    var noteMonth = parseInt(note.date.split("-")[1]); 
    if(this.currentMonth != noteMonth) 
    { 
    this.$set('currentMonth', noteMonth); 
    return true; 
    } 
    else 
    { 
    return false; 
    } 
} 

私は "行に問題がありますこれは$ set( 'currentMonth'、noteMonth); "です。私はこの行を追加すると、私は無限ループで立ち往生しています。 この行を削除すると、すべての問題は解決します(しかし、常に各メモの前に月が表示されます)。

あなたの問題を解決する方法をご存知ですか?

答えて

1

私は無限ループについてはわかりませんが、現在の方法ではこれを行うことはできません。

currentMonthは単一の変数であり、双方向データバインディングを持っています。私が言っているのは、currentMonthを一度変更すると、すべての場所で変更されます。最初のループでは1つの値が表示され、次のループでは他の値が設定されます。

常に最新の値が表示されます。

代わりに、あなたは次のように行うことができます。

hasMonthchangedはmontheは、あなただけの月が変更されたかどうか、最後のノートと比較したりすることはできません

を変更されたかどうかを返す関数である

<div v-for="(note, index) in notes | orderBy 'date' -1" > 
    <div v-if="hasMonthchanged(note, index)"><% getMonth(note) %></div> 
    <div style="background-color: #<% note.type.color %>; margin-bottom: 10px; border-left: solid #<% note.type.border_color %> 5px; padding-left: 5px;"> 
     <p class="noteMessage"><% note.message %><p> 
     <p class="noteInfos">Par <% note.author %> le <% note.date %></p> 
    </div> 
</div> 

を。

+0

ありがとうございました! currentMonthの問題については考えていませんでしたが、これを実行したときに気が散っていました^^ これは完璧に動作します=) –

関連する問題