Vuejs：爲變量賦值時的無限循環

我正在研究允許用戶記錄客戶的時間表。我想顯示屬於該月份的筆記組前的月份和年份。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」變量月份不同。所以我使用了V-如果我顯示了一個名爲「isNewMonth」功能來檢查值：

<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: 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）;「。當我添加這條線時，我陷入了無限循環。每當我刪除這條線時，一切都很好（但它總是顯示每個音符前的月份）。

你知道解決我的問題的方法嗎？

來源

2016-12-30 Axelle_G

我不確定無限循環，但不能用當前的方法做到這一點。

currentMonth是一個單變量，vueJs有雙向數據綁定，我說的是，如果你改變currentMonth一次，它會在所有的地方改變。這不是說第一個循環會顯示一個值，下一個循環會設置其他值。

它將始終顯示最新值。

相反，你可以這樣做以下：

<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>

其中hasMonthchanged是將返回蒙特是否已經改變

你可以只用最後一個音符比較功能，月份是否有變化。

來源

2016-12-30 10:46:51 Saurabh

謝謝你的回答！我沒有考慮currentMonth的問題，當我這樣做時我可能分心了^^ 它完美地工作=） –

Vuejs：爲變量賦值時的無限循環

回答

相關問題