Nativescript Vue ListView - อาร์เรย์ที่คาดหวัง ได้รับ Object

ฉันกำลังพยายามใช้องค์ประกอบ ListView เช่นนี้:

<ListView for="reservacion in reservaciones" @itemTap="onItemTap">
       <v-template>
             <Label :text="reservacion.fecha_reservacion" />
       </v-template>
</ListView>

แต่ฉันได้รับข้อผิดพลาดต่อไปนี้:

[คำเตือน Vue]: เสาไม่ถูกต้อง: การตรวจสอบประเภทล้มเหลวสำหรับเสา "รายการ" อาร์เรย์ที่คาดหวัง ได้รับ Object

ในการเรียก axios ของฉันฉันผูก this.reservaciones = response.data โดยที่ data เป็นอาร์เรย์ของวัตถุ:

[{
  "id":25,
  "folio":"181019165089",
  "jugador_id":3,
  "fecha_reservacion":"2018-10-19",
  "hora_reservacion":"07:00:00",
  "hoyo":1,
  "user_id":3,
  "status":0,
  "tipo_reservacion":3,
  "created_at":"2018-10-19 16:50:17",
  "updated_at":"2018-10-22 10:49:26"
},{
  "id":32,
  "folio":"181019170560",
  "jugador_id":3,
  "fecha_reservacion":"2018-10-19",
  "hora_reservacion":"07:10:00",
  "hoyo":10,
  "user_id":3,
  "status":0,
  "tipo_reservacion":3,
  "created_at":"2018-10-19 17:05:28",
  "updated_at":"2018-10-22 10:49:57"
}]

ฉันจะ "แปลง" Array of Objects เพื่อตอบสนองต่อ Array of Arrays ได้อย่างไร เพื่อที่ฉันจะสามารถผูกมันเข้ากับมุมมองรายการได้


nativescript listview vue.js
person Jk33    schedule 22.11.2018    source แหล่งที่มา

คำตอบ (1)


arrow_upward
1
arrow_downward

นี่คือไฟล์ Vue ตัวอย่างซึ่งผูก ListView ในไฟล์ NativeScript Vue โดยใช้ข้อมูลอาร์เรย์รายการแบบคงที่

<template>
    <Page class="page">
        <ActionBar class="action-bar">
            <Label class="action-bar-title" text="Home"></Label>
        </ActionBar>


        <ListView for="item in listOfItems" >
            <v-template>
            <!-- Shows the list item label in the default color and style. -->
            <GridLayout rows="auto" columns="*,*">
            <Label :text="item.text" col="0" row="0"></Label> 
            <Label :text="item.name" col="1" row="0"></Label>
            </GridLayout>
            </v-template>
            </ListView>

    </Page>
</template>
<script>
const listItems = [ {text:"One", name:"FirstElement"}, {text:"two", name:"SecondElement"}  
];
export default{

 computed :{
     listOfItems()
     {
        return listItems;
     }
 },

};
</script>
<style lang="scss" scoped>
    // Start custom common variables
    @import '../../_app-variables.scss';

    // End custom common variables

    // Custom styles
    .fa {
        color: $accent-dark;
    }

    .info {
        font-size: 20;
    }
</style>

เมื่อคุณได้รับการตอบสนองจาก axios คุณต้องแปลงเป็น JSON บางอย่างด้านล่าง

var listOfItems;  // <--- wanted to view this in console, so made it global
        // NOTE:  drop multiple map markers, use an array of marker objects
        axios.get('url')
            .then(function (response) {
                listOfItems = JSON.parse(response.data);               
            })
            .catch(function (error) {
                console.log(error);
            });

ตัวอย่างนี้ได้รับการทดสอบใน Android Emulator

person Baskar Rao    schedule 22.11.2018
comment
ดูเหมือนว่าการตอบสนองของฉันจะสับสนเล็กน้อย จริงๆ แล้วอาร์เรย์อยู่ใน response.data.data แต่การลองใช้รายการคงที่ทำให้ฉันไปในทิศทางที่ถูกต้อง ดังนั้นฉันจะทำเครื่องหมายว่าถูกต้อง ฉันไม่จำเป็นต้องแยกวิเคราะห์มัน btw ขอบคุณ - person Jk33; 22.11.2018