Nativescript Vue ListView - Expected Array, got Object

Question

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.

Baskar Rao · Accepted Answer · 2018-11-22 04:03:01Z

1

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.

edited Nov 22, 2018 at 4:03

answered Nov 22, 2018 at 3:56

Baskar Rao

4704 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jk33 Over a year ago

Seems like I had my response a bit messed up, the array was actually in response.data.data, but trying with a static list pointed me in the right direction so I'll mark this as correct. I did NOT need to parse it btw. Thank you.

Collectives™ on Stack Overflow

Nativescript Vue ListView - Expected Array, got Object

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related