Vuejs: бесконечный цикл при присвоении значения переменной

Question

Я работаю на временной шкале, которая позволяет пользователю делать заметки для клиента. Я хотел бы показать месяц и год перед группой заметок, относящихся к этому месяцу.

Например:

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); ". Когда я добавляю эту строку, я застрял в бесконечном цикле. Всякий раз, когда я удаляю эту строку, все в порядке (но всегда отображается месяц перед каждой нотой).

Знаете ли вы способ решения моей проблемы?

Answer 1

Я не уверен в бесконечном цикле, но вы не можете сделать это с помощью текущего подхода.

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 это функция, которая будет возвращать ли МОНТЕ была изменена

Вы можете просто сравнить с последней ноты, изменилось ли месяц или нет ,