Vuejs: endless loop when assigning a value to a variable

Question

I am working on a timeline that allows the user to take notes on a customer. I would like to display the month and the year before the group of notes that belongs to that month.

For example :

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

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

As I use VueJS to display my notes, I wanted to test each note to check if the month was different from the month saved in a variable called "currentMonth". So I used a v-if in my display to check the value with a function called "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>

And the function isNewMonth :

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

I have an issue with the line "this.$set('currentMonth', noteMonth);". When I add this line, I am stuck in an endless loop. Whenever I remove this line everything is fine (but it always display the month before each note).

Do you know a way to solve my issue ?

Saurabh · Accepted Answer · 2016-12-30 10:46:51Z

1

I am not sure about infinite loop, but you can not do this with the current approach.

currentMonth is a single variable and vueJs have two way data binding, what I am saying is, if you change currentMonth once, it will be changed at all the places. It is not that for first loop it will show one value and for next loop it will set other value.

It will always show the latest value.

Instead you can do something like following:

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

where hasMonthchanged is the function which will return whether monthe has been changed

You can just compare with last note, whether month has changed or not.

answered Dec 30, 2016 at 10:46

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Axelle_G Over a year ago

Thank you for your answer ! I did not think about the issue with currentMonth, I was probably distracted when I did this ^^ It works perfectly =)

Collectives™ on Stack Overflow

Vuejs: endless loop when assigning a value to a variable

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related