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