如何在value + ionic上使用v-for数据属性?

Question

我试图在vue js + ionic的data()属性上使用v-for循环。但这并没有发生。当我像这样检查这个属性时console.log(this. workorders)

我得到一个像这样的对象

[[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的响应。数据正在传入，但在[[目标]]索引中。我不知道为什么。我怎么能访问数据，但如果有一个正确的，将是赞赏。

我的代码

<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>

Answer 1

你在你的离子项中包含了v-for的绑定语法，它不应该在那里:

<ion-item :v-for="(work_order,index) in this.work_orders" :key="index">

尝试删除绑定:

<ion-item v-for="(work_order,index) in this.work_orders" :key="index">