Блог

У меня есть проблема, которую я, похоже, не могу решить с помощью Airtable и Vue2 CLI, и я подумал, может ли кто-нибудь помочь?

Я создал базу и использую цикл Vue for для перебора списка объектов. Хотя мой цикл работает и правильно отображается в браузере, порядок объектов совершенно случайный. Я пробовал разные методы, чтобы попытаться расположить их в одном порядке, чтобы они соответствовали порядку на базе Airtable, но, похоже, ничего не работает. Мой код выглядит следующим образом:

В моем компоненте Vue;

 <div class="timeline-wrapper" v-for="record in records" v-bind:key="record.Title">
    <h2>{{ record['fields']['Title'] }}</h2>
</div>
 

Затем в скрипте компонента у меня есть;

 import axios from 'axios';
axios({
    url: 'https://api.airtable.com/v0/app123456789/',
    headers: {
        'Authorization': 'Bearer key123456789'
    }
}).then((res) => {
    res.data.records
});
export default {
    props: [
        'columns'
    ],
    data() {
        return {
            apiUrl: 'https://api.airtable.com/v0/',
            apiKey: 'key123456789',
            base: 'app123456789/NameOfBase',
            records: [
            ]
        };
    },
    mounted() {
        this.getData();
    },
    methods: {
        getData: function() {
            axios({
                url: this.apiUrl   this.base,
                headers: {
                    'Authorization': `Bearer ${this.apiKey}`
                }
            }).then((res) => {
                this.records = res.data.records;
            });
        }
    }
};
 

Порядок в таблице, основанной на Air, такой же, как на прикрепленном изображении;

Однако при этом в браузере выводятся буквы B, D, A, C.

Приставка;

Любая помощь приветствуется.