Vue2 + Airtable - How can I sort a loop so its not in a random order?

I have a problem I can’t seem to solve with Airtable and Vue2 CLI and wondered if anyone could help?

I have set up a base and am using a Vue for loop to iterate through a list of objects. Although my loop works, and renders in the browser. However, the order of the objects are completely random. I have tried a different methods to try and get them in the same order as in the base but nothing seems to work. My code is as follows:

In my Vue Component;

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

Then in the script of the component I have;

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;
            });
        }
    }
};

The order in the based on Airtable is as in the attached image;
base

However, this prints, B, D, A, C in the browser.

Any help welcome.

Record order can be arbitrary if you collect data directly from a table. However, if you ask for records from a specific view, they should be ordered based on their order in the view. While I’ve successfully used this technique in internal scripts (Scripting apps and automations), I’ve not used the Airtable’s REST API, so I’m not 100% sure how to restructure what you’ve got to collect records from a view.

Thank you. It seems crazy that records can be random from Airtable base. I am trying now to see if I can order in the Vue View with methods/computed property. Issue is though when I do it breaks to connection to Airtable. Iv’e got 48 hours to solve it. If not I’m in big trouble.

I don’t believe that it’s truly random. If you make the same request of a table multiple times, it’ll always be the same order. My impression from some older tests that I ran was that querying the table directly would return the records in the order that they were created, whereas querying a view orders them as they appear in the view. The creation-order behavior hasn’t always been consistent, though, but view order has.

So just to see if I have understood what you are saying.
Airtable: The order in Airtable is correct and when queried they are in the order you created them. (Which would be logical)
Vue2 CLI: When the v-for loop runs in the View it is just creating a random order.

Is that what you are saying or have I got it wrong > :slight_smile:

Not quite.

They should be in the order that you created them, even if they’ve been rearranged. However, as I said, in a few of my tests this creation-order theory was proven wrong, and the order that Airtable returned them wasn’t necessarily in creation order.

I don’t think the issue is with Vue2 CLI. It should maintain the record order as sent from Airtable. Airtable is sending the data as an array, and array item order is maintained when passed from an API to the requesting service. What I think that you’re seeing is the not-always-creation-order issue, which is being set when the data is being added to the array by Airtable before sending to Vue2. That’s why I suggested querying a specific view, because Airtable always maintains record order for specific views, even if that view is a default view with no special sorting set.

Thank you for clarifying and for offering your time and input on this. I really appreciate it.

Basically, I am trying to create a timeline. So, when a piece of news happens I can add it to a new row in the base in Airtable. Then, by reversing the loop (slice method) it can be displayed on top (Could also just flip the list with CSS flex). Older news posts go underneath etc. However, as you can see things are just mixed up which is really disappointing.

Kind of like this.

I will try and learn how to query the view and go from there.

When using the REST API you can specify a sort order to the records returned.

image

Thank you for the information @kuovonne Unfortunetly, this didnt work when trying to add it to my code above. Implimenting the [{field: “Title”, direction: “desc”}] within the mustache syntax of the h2 heading in various combinations didn’t resolve the issue of the Vue for loop displaying the tabel data in a random order. In addition, adding the query parameter to the axios import like:
https://api.airtable.com/v0/app123456789/sort[0][field]=Titlesort[0][direction]=desc also had no effect. Just can’t seem to solve this.

This query string does not look right. Maybe the forum is messing with the text in the string. It is hard to say. It is not url encoded and Titlesort is run together as a single word. The two query parameters should have & between them. The first query parameter should also have ? in front of it. I suggest googling how to create and format url query parameters until you understand how to form them.

I have updated it to the following buy still not working.

Found this tool to help automate the URL https://codepen.io/airtable/full/rLKkYB I have added part of this generated URL to the data() base: part of my script. As a result this for loop is now ordered.

2 Likes

This topic was solved and automatically closed 15 days after the last reply. New replies are no longer allowed.