Vue - 为每个 v-for 项目运行方法 [英] Vue - run method for every v-for item

问题描述

我通过 v-for 遍历日历中的日期:

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

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

在 Firebase 中，我存储了事件.每个事件都有一个日期属性:

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

eVeNtKeY
  date: 12/7/17

现在，每天都不会有事件，但我需要获取每天的事件计数.我通过 Firebase 调用下载了当月的所有事件，并将其作为数组 thisMonthsEvent 保存在 Vue data 中.

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
}

有没有办法为 v-for 的每次重复运行一个方法?在我看来，我可以这样做:

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

推荐答案

使用方法代替计算属性，直接在v-for循环中调用方法，传入天变量:

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>

这篇关于Vue - 为每个 v-for 项目运行方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！