嵌套v-for循环中如何将计算属性绑定到Bootstrap Popover实现日期匹配

问题根源 #

你当前的异常主要来自两点：

1. 计算属性不应该直接修改data中定义的months原始数组，计算属性作为响应式派生值，每次触发渲染都会重新执行，你反复往months.createdOn里push值会导致数组无限膨胀，最终触发渲染异常（就是你看到的按钮消失问题）
2. popover内的v-for目前遍历的是全量日期数据，没有做月份过滤

解决方案 #

推荐两种实现方式，你可以根据自己的场景选择：

方案1：实时过滤（实现更简单，适合数据量不大的场景） #

直接新增两个工具方法，在模板渲染时实时过滤对应月份的日期并格式化：

1. 调整模板中popover部分的代码：

<b-popover
    :target="`date-popover-${month.name}`"
    triggers="hover"
    placement="top"
>
  <!-- 调用过滤方法拿到当前月份对应的日期 -->
  <div v-for="(payment, index) in getMonthPayments(month.name)" :key="index">
    <!-- 调用格式化方法输出月-日-年格式 -->
    {{ formatDate(payment.createdOn) }}
  </div>
</b-popover>

2. 在methods中新增对应方法：

methods: {
  // 过滤对应月份的日期
  getMonthPayments(monthShortName) {
    // 注意这里的this.dates要和你存Firebase返回数据的变量名统一，你之前模板写的payments如果是变量名写错了要修正
    return this.dates.filter(payment => {
      const date = new Date(payment.createdOn)
      const currMonth = date.toLocaleString('default', { month: 'short' })
      return currMonth === monthShortName
    })
  },
  // 格式化日期为 月-日-年 格式
  formatDate(dateStr) {
    const date = new Date(dateStr)
    return date.toLocaleDateString('default', {
      month: 'short',
      day: '2-digit',
      year: 'numeric'
    })
  }
}

3. 你原来的matchedMonths计算属性可以直接删除，不需要使用。

方案2：预分组（性能更好，适合数据量较大的场景） #

用计算属性预先把所有日期按月份分组，渲染时直接取值即可：

1. 新增计算属性和格式化方法：

computed: {
  // 按月份短名分组的日期映射表
  monthDateMap() {
    // 初始化12个月份的空数组
    const group = this.months.reduce((result, month) => {
      result[month.name] = []
      return result
    }, {})
    // 遍历所有Firebase返回的日期，归入对应月份分组
    this.dates.forEach(payment => {
      const date = new Date(payment.createdOn)
      const shortMonth = date.toLocaleString('default', { month: 'short' })
      if(group[shortMonth]) {
        group[shortMonth].push(payment.createdOn)
      }
    })
    return group
  }
},
methods: {
  // 格式化日期为 月-日-年 格式
  formatDate(dateStr) {
    const date = new Date(dateStr)
    return date.toLocaleDateString('default', {
      month: 'short',
      day: '2-digit',
      year: 'numeric'
    })
  }
}

2. 调整popover部分的代码：

<b-popover
    :target="`date-popover-${month.name}`"
    triggers="hover"
    placement="top"
>
  <div v-for="(dateStr, index) in monthDateMap[month.name]" :key="index">
    {{ formatDate(dateStr) }}
  </div>
</b-popover>

额外说明 #

你之前写的map方法报错是因为justDates是一个数组，不能直接和字符串month.name做全等判断，需要遍历数组匹配。

内容的提问来源于stack exchange，提问作者AdamBrashear