Can anyone help me figure out how to remove this warning? I suspect it's because I'm trying to manipulate an undefined object. Any assistance would be greatly appreciated! Thank you! Here is the code snippet:
<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">Minutes until next stop: <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>