Ytukyg

I'm trying to use the ListView element like this:

<ListView for="reservacion in reservaciones" @itemTap="onItemTap">

       <v-template>

             <Label :text="reservacion.fecha_reservacion" />

       </v-template>

</ListView>

But I'm getting the following error:

[Vue warn]: Invalid prop: type check failed for prop "items". Expected Array, got Object.

In my axios call I bind this.reservaciones = response.data, where data is an array of objects:

[{

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

}]

How can I "transform" the Array of Objects in the response into an Array of Arrays? So that I can bind it to the List View.

This is sample Vue File which binds ListView in NativeScript Vue File using static list array data.

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

When you get response from axios you need to convert it to JSON some thing like below.

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

            });

This sample is tested in Android Emulator.