Vue - run method for every v-for item

Question

I loop through days in a calendar via v-for:

<ul><li v-for="day in daysInMonth"></li></ul>

Over in Firebase, I have events stored. Each event has a date property:

eVeNtKeY
  date: 12/7/17

Now, each day won't have an event but I need to get an event count for each day. I downloaded all the event for the month via Firebase call and have it saved in the Vue data as an array thisMonthsEvent.

data: {
  thisMonthsEvents: [bunch of firebase data],
  currentMonth: number
}

Is there a way to run a method for every repetition of the v-for? In my thinking, I could do something like this:

    computed: {
        eventsByDay () {
          return this.thisMonthsEvents.filter(function (event) {
            return event.date === this.currentMonth + '-' + Somehow get the day from loop + '-2017'
});
        }
      }

Answer 1

Use a method instead of a computed property and call the method directly in the v-for loop, passing in the day variable:

methods: {
  getEventsByDay(day) {
    return this.thisMonthsEvents.filter(function (event) {
      return event.date === this.currentMonth + '-' + day + '-2017'
    });
  }
}

<li v-for="day in daysInMonth">
  {{ getEventsByDay(day) }}
</li>