Добавить подзаголовок в список, но только один раз - PullRequest
Новая
       17

Добавить подзаголовок в список, но только один раз

1 голос
/ 13 мая 2019

Мне нужно добавить подзаголовок в список.В настоящее время каждая запись с текущей датой получает подзаголовок, но я хочу установить ее только один раз.Кажется, проблема в том, что я не могу получить доступ к обновленному значению 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>

SCRIPT 

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

Как получить доступ к измененному значению this.todaySubheader в v-if =«todaySubheader

Ответы [ 2 ]

2 голосов
/ 15 мая 2019

У вас есть доступ к todaySubheader, но вы не хотите этого делать, потому что вы меняете его несколько раз в этом v-for при вызове функции.Возможно, вы захотите получить индекс первой today встречи: 

<v-subheader v-if="index === todayIndex"
...
computed: {
  todayIndex() {
    return this.filteredItems.findIndex(v => isToday(new Date(v.date) ) )
  },
1 голос
/ 17 мая 2019

вы можете создать глобальную переменную 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>
...