react-native - Vue Native - 使用 axios 从 api 获取数据未显示在页面上

Question

我想创建一个只显示从 api 获取的数据的基本应用程序。我正在使用 Vue Native，它是 React Native + Vuejs 的混合体，但是在我获得数据后它不会在页面上显示数据。

我的代码是：

<template>
    <view class="container">
        <view v-if="this.cars.length">
            <h1>{{this.cars[1][0]['title']}}</h1>
            <view v-for="(car, index) in this.cars[1][1]" :key="index">
                <image :source="{uri: 'https://example.com'+car['images'][0]['path']}" />
            </view>
        </view>
        <view v-else>
            <text>No car!</text>
        </view>
    </view>
</template>

<style>
.container {
    background-color: white;
    align-items: center;
    justify-content: center;
    flex: 1;
}
</style>

<script>
    import axios from 'axios';
    export default {
        data() {
            return {
                cars: {},
            }
        },
        mounted() {
            axios.get('https://example.com/api/cars')
                .then(cars => {
                    this.cars = cars.data;
                })
        },
    }
</script>

Answer 1

尝试保存实例，然后运行 ​​axios

mounted() {
            const vm = this
            axios.get('https://example.com/api/cars')
                .then(cars => {
                    vm.cars = cars.data;
                })
        },

Answer 2

您应该将汽车：{} 更改为汽车：[]

然后在您的 v-for="car in cars" 中。然后您可以获取您的数据，例如 car.Name

这就是它对我的工作方式，希望对我有帮助！