VueJS: вычисляемое свойство, использующее другое вычисляемое свойство, работает неправильно - PullRequest
Новая
       88

VueJS: вычисляемое свойство, использующее другое вычисляемое свойство, работает неправильно

0 голосов
/ 05 марта 2020

это не так: post1 , post2

Я строю небольшой SPA, и поэтому я начал с этого базового c принципа, который я протестировал и встроенный в код ниже, что у меня проблемы с. он работает ТОЛЬКО если я вызываю вторичное свойство в DOM (почему ??) и включил его, чтобы проиллюстрировать, с чего начал, в надежде, что принципы будут преобразованы по мере моего построения.

JS : 

var app = new Vue({
  el: '#app',
  computed: {
    today: function() {
      return new Date().getTime();
    },
    tomorrow: function() {
      return this.today + (1*24*60*60*1000);
  },
});

ДОМ: 

<div id='app'>
  <p>{{ today }}</p>
  <p>{{ tomorrow }}</p>
</div>

т. это работает. опять же, ТОЛЬКО если в DOM вызывается app.tomorrow. (wi sh я знал, как НЕ нуждаться в этом ...) НО моя проблема заключается в следующей части, которую я основал на этом стартовом коде. это НЕ работа:

JS: 

var app = new Vue({
  el: '#app',
  data: {
    dueNow: 0,
    reports: { 90: [], 'DN': [] },
  },
  computed: {
    today() {
      return new Date().getTime();
    },
    tMinus30() {
      return new Date().getTime() - (30 * 24 * 60 * 60 * 1000);
    },
    dueNow() {
      var count = 0;

      $.each(this.rows, function(index, obj) {
        var workingDate = new Date(obj.dateSubmitted).getTime();
        console.log('workingDate: '+workingDate);
        console.log('today: '+this.today);      <-- console reports 'undefined'!?
        console.log('today: '+this.tMinus30);   <-- console reports 'undefined'!?

        if(workingDate < this.today && workingDate > this.tMinus30){
          console.log('knock, knock: due NOW');   <-- therefore this never fires
          count++;
          console.log('count: '+count);

          //  build reports array - doesn't work, but that's for another day...
          this.reports['DN']['count'] = push(count);
          this.reports['DN'][index]['reportID'] = push(obj.id);
          this.reports['DN'][index]['assetID'] = push(obj.assetid);
        }
      });
      return count;
    },
  }
});

ДОМ: 

<div id='app'>
  <div class="col-lg-2">
  <h1 class="text-center pt-2">NOW</h1>
  <p>{{ today.getDay() }}</p>
  <p class="img-text mb-1" @click="expandInfo('DN')">{{ dueNow }}</p>
  </div>
</div>

так что нет только я не получаю count строк, которые dueNow, я тоже не получаю today.getDay(), рассчитанного, который, основываясь на из VueJS, должен работать. я подозреваю, что это летающий кошмар, но я его не вижу ... он правильно перебирает строки. он рассчитывает рабочую дату для каждой строки. но больше ничего не работает. я думал, что понял VueJS достаточно хорошо, чтобы попытаться это сделать. и я даже построил это из первого примера ... но я в растерянности относительно того, что сломано.

Какой принцип я пропускаю, чтобы сделать этот гель? мне кажется, что какая-то концепция ускользнула от меня.

РЕДАКТИРОВАТЬ: я также просмотрел эту статью , но не знаю, применимо ли это, поскольку в данных уже ничего не объявлено .. .

РЕДАКТИРОВАТЬ: ОК! :) мне нужно уточнить. когда я говорю «это не работает», я имею в виду, что вычисляемое свойство tomorrow не отображает и сообщает о другом вычисляемом свойстве в консоли как «неопределенное», несмотря на то, что (today) рендеринг просто отлично (без дополнительный метод). мой ожидаемый / желаемый результат заключается в том, что я увижу число, указывающее, сколько строк прошло проверку, и которые равны dueNow, и я хочу видеть today, отображаемое как «понедельник» и tomorrow как «вторник» (например). последний должен быть взаимозаменяем с другими функциями даты. если возможно, я бы также хотел, чтобы массив reports обновлялся правильно ... но сейчас это выходит за рамки.

...