I have been attempting to implement a v-for loop on the data() property in Vue.js + Ionic, but it doesn't seem to be working as expected. When I try to check the property using console.log(this.workOrders)
The output I get looks like this:
[[Handler]]: Object
deleteProperty: ƒ deleteProperty(target, key)
get: ƒ (target, key, receiver)
has: ƒ has(target, key)
ownKeys: ƒ ownKeys(target)
set: ƒ (target, key, value, receiver)
__proto__: Object
[[Target]]: Array(2)
0: {id: 8, internal_control_number: "1234567", date_of_work: "02/24/2021", agent: "6", ranch: "2", …}
1: {id: 3, internal_control_number: "12345678765432", date_of_work: "2021-02-24", agent: "6", ranch: "1", …}
length: 2
__proto__: Array(0)
[[IsRevoked]]: fals
Axios is providing a response and the data is coming through, but it only appears under [[Target]] index. This behavior is puzzling to me - can anyone shed some light on why this might be happening? Any guidance would be greatly appreciated.
Below is the code snippet I'm working with:
<template>
<ion-header>
<ion-toolbar>
<ion-title>Notifications</ion-title>
<ion-buttons slot="start">
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button color="secondary" @click="handleSignOut">
<ion-icon slot="icon-only" :icon="logOut"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
</ion-buttons>
</ion-toolbar>
</ion-header>
<!-- List of Text Items -->
<ion-list >
<ion-item :v-for="(work_order,index) in this.work_orders"
:key="index">
<ion-label >{{ work_order }}</ion-label>
</ion-item>
</ion-list>
<side-menu/>
</template>
<script>
import {
IonItem,
IonList,
IonLabel,
} from '@ionic/vue';
import { defineComponent } from 'vue';
import SideMenu from '../SideMenu.vue';
import ApiService from "../../services/api.service";
import { TokenService } from "@/services/token.service";
export default defineComponent({
components: {
IonItem,
IonList,
IonLabel,
SideMenu,
},
data(){
return {
work_orders : [],
}
},
methods:{
getWorkOrders : function()
{
const boss_id = TokenService.getUserInfo().role_details.id;
return ApiService.get(`/api/gangBoss/workOrders/view/${boss_id}`)
.then((response) => {
this.work_orders = response.data;
console.log(this.work_orders);
});
}
},
mounted(){
this.getWorkOrders();
}
});
</script>