Vue Native - получение данных из API с использованием axios не отображается на странице - PullRequest
Новая
       28

Vue Native - получение данных из API с использованием axios не отображается на странице

0 голосов
/ 01 июня 2019

Я хочу создать базовое приложение, которое просто показывает выборку данных из 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>

1 Ответ

0 голосов
/ 06 июня 2019

Вы должны изменить автомобили: {} на автомобили: []

Тогда в вашем v-for = "машина в автомобилях".Тогда вы можете получить свои данные, например, car.Name

Вот как это работает для меня, надеюсь, это поможет!

...