数据（）中的Vue警告错误“类型错误：无法将未定义或空值转换为对象”

Question

does anybody know how I can get rid of this warning? I guess it happens because I try to do something with an undefined object? Any help would be very much appreciated! Thank you! Here is my code:

 <v-card class="ma-3 pa-3" v-for="item in state.monitorAll[0]" v-bind:key="item.countdown"> <v-row> <div class="ma-3">Minuten bis zum nächsten Halt: <v-avatar class="ml-2 blue white--text">{{ item.departureTime.countdown }}</v-avatar></div> <v-avatar v-if="typeof item.vehicle == 'undefined'" class="ma-3 ml-5 green"><v-icon class="white--text">accessible</v-icon></v-avatar> </v-row> </v-card> <script> import axios from 'axios' import {onMounted, reactive} from '@vue/composition-api' export default { name: 'App', setup() { let state = reactive({ wlData: '', monitorAll: [], }) async function showData() { let config = { headers: { 'Accept': 'application/json', 'Access-Control-Allow-Origin': 'http://localhost:8080', 'Content-Type': 'text/plain' } } const wlData = await axios.get('http://localhost:8080/ogd_realtime/monitor?rbl=832', config); state.wlData = wlData.data.data['monitors']; state.monitorAll = state.wlData.map(monitor => monitor.lines[0].departures.departure); } let startLoad = onMounted(() => { console.log('component is mounted!'); showData(); }) return { state, showData, startLoad, } } }; </script>

Answer 1

I figured it out. It was the onMounted that caused the problem. I guess it is because the onMounted is called before there is any value in the showData(). I am not sure. I deleted;

let startLoad = onMounted(() => { console.log('component is mounted!'); showData(); })

and just called showData() directly after the async function showData() is being created. I have no idea why this works and I guess it is not the best way to handle it, but at least I lost my warning!