Как правильно обработать массив JSON (или объект) из Axios?

Question

[Александр]

Начинающий - тупо беру код из примеров. Просьба объяснить на пальцах )))
Ошибки:
"TypeError: e.Deadlines is not a constructor"
"TypeError: Cannot read property e.Deadlines of null"
Толи я не понимаю область видимости переменных
Толи я не понимаю Диаграмма жизненного цикла

Как я это представляю:
Беру MainData из Axios. Отрезаю пустую Дату. Добавляю фильтр через radio на даты.
Начались ошибки с фильтром на пустую дату. В computed отказалась работать. Хорошо - поставил фильтр в Axios - работает. Дальше хуже.
Загрузка компонента:
Компонент правильно отображает две записи - выкидывает пустую запись, но ...
Ответ в консоле: null и "mounted". MainData = null. Уппппс...
Нажимаю кнопку radio = "TypeError: e.Deadlines is not a constructor". В консоле - undefined
Опять Нажимаю кнопку radio = консоль наконец отображает массив.
Что то я не понимаю с видимостью и инициализацией...

И подозрение что вообще неправильно написал FilterMainData. В template мне надо MainData менять. Если в template пишу "value in FilterMainData", то список не отображает. Так что и тут ткните меня. )))

Есть template

<template>
  <div class="News">
    <input type="radio" id="All" value="All" v-model="picked">
    <label for="All">Все</label>
    <input type="radio" id="Active" value="Active" v-model="picked">
    <label for="Active">Активные</label> {{picked}}
    <article v-for="value in MainData" v-bind:key="value.id">
    <ul>
      <template v-if="value.Deadlines"> // это лишнее. но для теста нужна была
        <li><div>Сроки</div></li>
        <li><div>{{value.Deadlines}}</div></li>
      </template>
    </ul>
    </article>
  </div>
</template>

Есть script

<script>
import axios from 'axios';
export default {
  name: 'List',
  data() {
    return {
      MainData: null,
      picked: "All"
    }
  },
  mounted: function(){
    axios
      .get('http://localhost:8080/static/MainData.json')
      .then(response=>(this.MainData=response.data.filter(function(e){
        return e.Deadlines.length >0;
      })
      ))
      .catch(error=>console.log(error)); // Надеюсь тут MainData уже определена?
      this.FilterMainData();
      console.log("mounted");
  },
  methods: {
    FilterMainData: function(){ // тут как то надо MainData возвращать 
      if(this.picked != "All"){
        console.log(this.MainData.Deadlines);  //ошибка
        return this.MainData.filter(function(e){
          var NowDate = new Date();
          var EndDate = new (e.Deadlines); // Вот тут ЗАСТРЯЛ
          console.log("FilterMainData");
          return EndDate-NowDate > 0
        });
      }else{
        console.log(this.MainData);
        return this.MainData //ошибка MainData = null.
      }
    }
  },
  watch: {
    picked: function(){
      return this.FilterMainData(); 
    }
  }
}
</script>

Есть MainData

[
{"id":1, "Deadlines":  ""},
{"id":2, "Deadlines":  "28.10.2020 "},
{"id":2, "Deadlines":  "08.05.2020 "}
]

Comments

[Михаил]

Но код и правда отстой, напишите к каждой строке комментарий объясняющий её, того гляди сами поймете ошибки
и про асинхронность почитайте

[Александр]

1. Огромное Спасибо Михаил - показал где мой идиотизм )))
2. На "асинхронность" забил добавив computed

computed: {
    ComputedMainData: function (){
      return this.FilterMainData();
    }
  },

И в template

<article v-for="value in ComputedMainData" v-bind:key="value.id">

С даты пришлось переделывать

var EndDate = new Date(e.Deadlines.replace(/(\d+).(\d+).(\d+)/, '$3/$2/$1'));

Иначе путает день с месяцем.

[Александр]

Для будущих читателей ...
Попытка усложнить обработку данных приводит к ошибке. Аxios вроде вернул данные в MainData, но computed их не видит: MainData=null. Зараза эта асинхронность )))
Нашел костыль:
Внутри функции ставить конструкцию

try{
... тут то что мы и планировали делать.
}catch{
... тут просто любой комментарий. Что то написать надо )))
}

Но я считаю это - костыль!!! Ошибка есть и мы ее прячем. НО работает.