Nativescript Vue ListView - 预期数组，得到对象 [英] Nativescript Vue ListView - Expected Array, got Object

问题描述

我正在尝试像这样使用 ListView 元素:

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>

但我收到以下错误:

[Vue 警告]:无效的道具:道具项目"的类型检查失败.预期数组，得到对象.

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

在我的 axios 调用中，我绑定了 this.reservaciones = response.data，其中 data 是一个对象数组:

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.

推荐答案

这是使用静态列表数组数据绑定 NativeScript Vue 文件中的 ListView 的示例 Vue 文件.

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>

当您从 axios 得到响应时，您需要将其转换为 JSON，如下所示.

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

此示例在 Android 模拟器中进行了测试.

This sample is tested in Android Emulator.

这篇关于Nativescript Vue ListView - 预期数组，得到对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！