时间戳

首页 > 解决方案 > 将子标题添加到列表但仅一次

javascript - 将子标题添加到列表但仅一次

问题描述

我需要在列表中添加一个子标题。目前，日期为今天的每个条目都有一个子标题，但我只想设置一次。问题似乎是我无法todaySubheader访问<span v-if="todaySubheader.

HTML

<template v-for="(meetup, index) in filteredItems">
            <v-subheader
              v-if="checkIsToday(meetup.date)"
              inset
            >
            <span v-if="todaySubheader === false">TODAY</span>
            </v-subheader>

脚本

data () {
    return {
      todaySubheader: false,
[...]
checkIsToday (val) {
  if (val && this.todaySubheader === false) {
    this.todaySubheader = true
  }
  return isToday(new Date(val))
},

如何访问v-if="todaySubheader中this.todaySubheader的更改值？

标签： javascriptvue.jsvuejs2vuetify.jsdate-fns

解决方案

您确实 access todaySubheader，但您不想这样做，因为您在v-for调用该函数时多次更改它。您可能想要获取第一次today聚会的索引： 

<v-subheader v-if="index === todayIndex"
...
computed: {
  todayIndex() {
    return this.filteredItems.findIndex(v => isToday(new Date(v.date) ) )
  },

推荐阅读