• 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

VPS Starter Arubacloud
0 głosów
118 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 (269,120 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 (269,120 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 186 wizyt
pytanie zadane 21 maja 2022 w JavaScript przez Renzov Obywatel (1,220 p.)
0 głosów
1 odpowiedź 180 wizyt
0 głosów
4 odpowiedzi 333 wizyt
pytanie zadane 19 sierpnia 2020 w JavaScript przez mi-20 Stary wyjadacz (13,190 p.)

92,452 zapytań

141,262 odpowiedzi

319,077 komentarzy

61,854 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.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...