Nativescript Vue ListView - Array yang diharapkan, dapatkan Objek

Saya mencoba menggunakan elemen ListView seperti ini:

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

Tapi saya mendapatkan kesalahan berikut:

[Peringatan Vue]: Prop tidak valid: pemeriksaan tipe gagal untuk "item" prop. Array yang diharapkan, dapatkan Object.

Dalam panggilan aksio saya, saya mengikat this.reservaciones = response.data, di mana data adalah array objek:

[{
  "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"
}]

Bagaimana saya bisa "mengubah" Array Objek dalam respons menjadi Array Array? Sehingga saya bisa mengikatnya ke Tampilan Daftar.


nativescript listview vue.js
person Jk33    schedule 22.11.2018    source sumber

Jawaban (1)


arrow_upward
1
arrow_downward

Ini adalah contoh File Vue yang mengikat ListView di File Vue NativeScript menggunakan data array daftar statis.

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

Ketika Anda mendapat respons dari aksio, Anda perlu mengubahnya menjadi JSON seperti di bawah ini.

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);
            });

Sampel ini diuji di Android Emulator.

person Baskar Rao    schedule 22.11.2018
comment
Sepertinya respons saya agak kacau, array sebenarnya ada di respon.data.data, tetapi mencoba dengan daftar statis mengarahkan saya ke arah yang benar jadi saya akan menandai ini sebagai benar. Saya TIDAK perlu menguraikannya btw. Terima kasih. - person Jk33; 22.11.2018