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显示我的笔记时，我想测试每个笔记以检查月份是否与保存在名为＆＃34; currentMonth＆＃34;的变量中保存的月份不同。所以我在显示器中使用了一个v-if来检查一个名为＆＃34; isNewMonth＆＃34;的函数。：

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

我遇到了问题＆＃34;这个。$ set（＆＃39; currentMonth＆＃39;，noteMonth）;＆＃34;。当我添加这一行时，我陷入无休止的循环中。每当我删除这一行时一切都很好（但它总是显示每个音符前一个月）。

你知道解决我问题的方法吗？

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是将返回monthe是否已更改的函数

您可以与上一个音符进行比较，月份是否已更改。

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

1 个答案: