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

您应该将汽车：{}换成汽车：[]

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

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

Answer 2

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

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

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

2 个答案: