Vue v-for jak się zabezpieczyć przed cannot get property of non object

Question

Może ktoś z was chce rzucić okiem na tego codepena:

https://codepen.io/kordix/pen/EBbNjJ

Ten kod ładnie mi pokazuje elementy dla aktywnej kategorii. Funkcją find znajduję aktywną kategorię i to wykorzystuję w v-for.

Jednak muszę mieć w danym momencie aktywną kategorię żeby nie wywaliło błędu. Chciałbym żeby po prostu nie pokazywało niczego jeśli nie znajdzie niczego w v-for. Generalnie tak to działa tyle że tutaj dane są zagnieżdżone i muszę się dostać do właściwości obiektu - i dlatego wywala błąd jesli funkcja find niczego nie zwraca. 

Teraz na pałę dbam o to żeby była jakaś kategoria z właściością active na true

Macie jakąś wizję, pomysł jak się przed tym zabezpieczyć? 

Nie byłoby problemu gdyby to była najzwyczajniejsza w świecie funkcja, ty by się użyło np.:

if(this.categories.find((el)=>el.active==true !='undefined'){
//logika
}

Natomiast nie zastosuję tego w v-for

Comments

<template v-if="this.categories">

// twój for

</template>

 

---

Kurde działa, dziwne, wydawało mi się że to też testowałem

---

Mogło ci się pomylić z props, gdzie może wstawiłeś na default -> {}

---

Dla potomnych to też jest fajny sposób:

https://forum.vuejs.org/t/v-for-return-empty-if-property-of-non-object-instead-of-error/67366