• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Przy odpalaniu projektu pojawia się błąd z propsami, który potem "sam" się naprawia - Vue

Aruba Cloud - Virtual Private Server VPS
0 głosów
172 wizyt
pytanie zadane 13 marca 2022 w JavaScript przez Greeenone Pasjonat (16,100 p.)

Hej,

Mam pewien problem z nową wersją Vue (Dokładniej 3), prawdopodobnie TypeScriptem oraz propsami. Mianowicie chodzi o to, że w skrypt co jakiś czas "nie widzi" propsów.

Posiadam plik vuejs który zawiera widok stron, a w nim jest komponent od ApexChart do którego przesyłam propsy. W propsach są takie informacje jak nazwa, % do wyświetlenia, kolor etc. Wysyłam to w postaci obiektu:

:chartData="{name: 'Nazwa', unit: 'CM', quantity: 230, color: '#0084ff', percent: 100 }"

ApexChart widzi obiekt "chartData", ale już elementy. Gdy wpisuje dajmy na to "props.chartData.name", jest podświetlane na czerwono z informacją:
 

Object is possibly 'undefined'.
    24 |       },
    25 |       fill:{
  > 26 |           colors: props.chartData.color
       |                   ^^^^^^^^^^^^^^^
    27 |       },

Co jest dziwne, gdy wpisuje do console.log(props.chartData.Color), jest także podświetlane na czerwono w VSCode, natomiast Vue nie wywala błędu i poprawnie wyświetla treść. Aby pozbyć się błędu, muszę usuwać wszystkie proposy z chart data, a następnie wpisać ponownie i zapisać. Wtedy skrypt działa. Czytałem, że to prawdopodobnie jakiś problem z TypeScriptem.

Tak wygląda mój skrypt.

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
    props:{
        chartData: Object,
    },
    setup(props) {

    const options = {
      chart: {
        fontFamily: "inherit",
        height: 200,
      },
      fill:{
          colors: props.chartData.color
      },
    labels: [[props.chartData.quantity + ' ' + props.chartData.unit, props.chartData.name]],
  plotOptions: {
    radialBar: {
      dataLabels: {
        show: true,
        name: {
            show: true,
            fontSize: '16px',
        },
        value: {
            show: true,
            fontSize: '12px',
        }
      }
    }
  },
    };
    return {
      options,
    };
  },
});
</script>

Czy ktoś może wie co jest nie tak?

 

//EDIT zmiana lang="ts" na "js" naprawiła problem

komentarz 13 marca 2022 przez Wiciorny Ekspert (280,450 p.)
Object is possibly 'undefined'. wygoogluj sobie co to może oznaczac.  z naciskiem o tym dlaczego coś może byc 'possibly' i jak temu zaradzić
też wziąłbym to na warsztat i wprowadził poprawki aby unikać możliwości wystąpienia takich przypadków
propsy są asynchroniczne... poczytaj o tym bo to powoduje takie fakty.
Więc jeśli coś asynchroniczne jest, to w momencie kiedy  chcesz się do tego odwołać synchronicznie, lub za wcześnie- to nie ma gwarancji że te dane jeszcze tam są
komentarz 13 marca 2022 przez ScriptyChris Mędrzec (190,190 p.)

@Greeenone, możesz pokazać jak ładowany jest ten komponent i skąd biorą się propsy?

1
komentarz 13 marca 2022 przez Greeenone Pasjonat (16,100 p.)

@Wiciorny, Dziękuje za odpowiedź. Tak, wiem o tym wszystkim, problem udało mi się rozwiązać chwilę po napisaniu tego posta.

komentarz 13 marca 2022 przez Greeenone Pasjonat (16,100 p.)

@ScriptyChris, Udało mi się rozwiązać problem zmieniając script lang z ts na js

komentarz 13 marca 2022 przez Wiciorny Ekspert (280,450 p.)
To nie rozwiązałeś problemu, a po prostu go "ukryłeś" problem występuje, tylko TS- jest bardziej restrykcyjny niż JS, stąd JS nie wykrywa tego błędu, lub go ignoruje
https://www.securityjourney.com/post/typescript-doesnt-suck-you-just-dont-care-about-security
https://stackoverflow.com/questions/31391760/use-strict-needed-in-a-typescript-file

1 odpowiedź

+1 głos
odpowiedź 13 marca 2022 przez niezalogowany
    props:{
        chartData: Object,
    },

Ten zapis oznacza tylko tyle, że props jest JAKIMŚ obiektem i tak naprawdę do komponentu możesz przekazać cokolwiek. TS próbuje uchronić Cię przed potencjalnym błędem, gdy prześlesz na przykład taki props:

:chartData="{ lorem: 2 }"

stąd informacja, że props.chartData.name może być undefined.

Powinieneś zdefiniować jak dokładnie ma wyglądać props, aby już przy próbie zapisania `char-data="{ lorem: 2 }" TS informował programistę, że ten komponent przyjmuje inną strukturę danych. W ten sposób unikniesz dalszych błędów:

import { defineComponent, PropType } from "vue";
 
export default defineComponent({
    props:{
      chartData: {
        required: true,
        type: Object as PropType<{
          name: string,
          quantity: number,
          // ...
        }>
      }
    },
    // ...
})

 

Podobne pytania

0 głosów
2 odpowiedzi 299 wizyt
pytanie zadane 21 maja 2022 w JavaScript przez Renzov Obywatel (1,220 p.)
0 głosów
1 odpowiedź 248 wizyt
0 głosów
4 odpowiedzi 498 wizyt
pytanie zadane 19 sierpnia 2020 w JavaScript przez mi-20 Stary wyjadacz (13,250 p.)

93,324 zapytań

142,323 odpowiedzi

322,390 komentarzy

62,653 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...