将副标题添加到列表中但仅添加一次

Question

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

如何访问 this.todaySubheader 在 v-if="todaySubheader?

Answer 1

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

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

Answer 2

您可以创建一个全局 javascript 变量：

var todayAdded=false;

那么您的 checkToday 方法将执行以下操作：

checkIsToday (val) {
  if (isToday(new Date(val))) {
    if (!todayAdded)
       todayAdded= true;
    return true;
  }
  return false;  
},

和你的html：

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

将副标题添加到列表中但仅添加一次

Add subheader to a list but only once

javascript

vue.js

vuejs2

vuetify.js

date-fns