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

【问题标题】：How to use v-for on data property on vue + ionic?如何在 vue + ionic 上的数据属性上使用 v-for？
【发布时间】：2021-02-18 14:41:02
【问题描述】：

我正在尝试对 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>

【问题讨论】：

您对 API 数据格式的期望可能与实际返回的不匹配。由于您发送的是 GET 请求，我会使用 Postman 或 Insomnia 之类的程序调用它，甚至只是通过浏览器中的 URL。
响应正确，即[{"id":8,"internal_control_number":"1234567","date_of_work":"02\/24\/2021","agent":"6","ranch":"2","weighing_machine":"3","type_of_cut":"6","type_of_damage":"2","number_of_boxes":"10","size_of_boxes":"3","fruit_delivery_location":"Packaging Company Location","cutting_company":"1","packaging_company":"2","independent_contractor":null,"cutting_amount":null,"meeting_location":"San Miguel de Allende, Guanajuato, Mexico","gang_boss":"2","extra_gang":null,"truck":"1","observation":null
实际上响应是正确的，当我将它分配给它改变甲酸盐的变量时

标签： javascript arrays vue.js vuejs2 vuejs3

【解决方案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">

【讨论】：