Nativescript Vue ListView - 预期的数组，得到对象

Question

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

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

但我收到以下错误：

[Vue 警告]：无效的道具：道具“项目”的类型检查失败。期望数组，得到对象。

在我的 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"
}]

如何将响应中的对象数组“转换”为数组数组？这样我就可以将它绑定到列表视图。

Answer 1

这是一个示例 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 模拟器中进行了测试。