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-if 来检查一个名为 "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>

函数是NewMonth :

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

"this.$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 是 return 月度是否已更改的函数

你可以跟上一个笔记对比一下，月份有没有变化。

Vuejs：为变量赋值时无限循环

Vuejs: endless loop when assigning a value to a variable

infinite-loop

vuejs2