Vuejs динамически обновлять значение, используемое с v-for - PullRequest
0 голосов
/ 29 января 2020

Итак, я создаю трекер посещаемости с Vuejs и Vuetify, и я хочу, чтобы он выглядел следующим образом: Calender, состоящий из компонентов V-Card, и список отсутствий, считанный из базы данных. У меня настроен API, и я могу получить список отсутствий без каких-либо проблем, но когда дело доходит до их вывода на экран, у меня возникают некоторые проблемы. Я хочу сделать следующее: пользователь выбирает месяц и год. Каждая карта показывает один день этого месяца. У меня есть функция с именем getAbsDate(date), которая возвращает список отсутствий на дату, переданную ей. Я хочу, чтобы это работало примерно так на каждой карточке:

<v-card min-height="170" tile>
  <v-card-text class="text-center black--text">
    {{i}}
    <v-sheet
      color="blue"
      class="pa-1"
      v-for="abs in getAbsDate(i+'.'+monthsNums[selMonth]+'.'+selYear)"
      :key="abs['id']"
    >{{abs["name"]}}</v-sheet>
  </v-card-text>
 </v-card>

selMonth - это месяц, выбранный пользователем, а selYear - год, выбранный пользователем. Это не работает однако. Я не получаю никаких ошибок, карты просто пустые. getAbsDate() возвращает список объектов. Есть идеи, почему это не работает? Спасибо!

РЕДАКТИРОВАТЬ Вот объявление моей getAbsDate() функции.

getAbsDate: function(date) {
  let l = [];
  this.absences.forEach(abs => {
    if (abs["start"] == date) {
      l.push(abs);
    }
    if (abs["end"] == date) {
      l.push(abs);
    }
    let day_start = moment(abs["start"].replace(".", "/"), "DD/MM/YYYY")    
          .toDate()
          .getTime();
    let day_end = moment(abs["end"].replace(".", "/"), "DD/MM/YYYY")
          .toDate()
          .getTime();
    let day_date = moment(date.replace(".", "/"), "DD/MM/YYYY")
          .toDate()
          .getTime();
    if (day_start <= day_date && day_date <= day_end) {
     l.push(abs);
    }
  });
  return l;
  }
}

Форматирование не совсем верно для .toDate() и .getTime(), но в моем файле это не так.


...