如何在 vue + 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 的回复。数据即将到来，但在 [[Target]] 索引中。我不知道为什么。我如何访问数据，但如果有正确的方法，我将不胜感激。

这是我的代码

<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

您在 ion-item 中包含 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">

如何在 vue + ionic 上对数据属性使用 v-for？

How to use v-for on data property on vue + ionic?

javascript

arrays

vue.js

vuejs2

vuejs3

如何在 vue + ionic 上对数据 属性 使用 v-for？

How to use v-for on data property on vue + ionic?

javascript

arrays

vue.js

vuejs2

vuejs3

如何在 vue + ionic 上对数据属性使用 v-for？