Maintaining Original Airtable Record Order When Rendering Vue2 v-for Loop

Other Questions Airtable
1

I’m working on a Vue2 project integrating Airtable’s API, and I’m experiencing an unexpected rendering issue. When fetching records using Axios, the objects are displaying in a random sequence that doesn’t match the original order in my Airtable base.

Problem Details

  • Data is successfully retrieved from Airtable
  • Vue component renders records correctly
  • Records appear in an inconsistent order (not matching Airtable base)

Current Implementation

mounted() {
    this.fetchTableRecords();
},
methods: {
    fetchTableRecords() {
        axios({
            url: `${this.apiUrl}${this.base}`,
            headers: { 'Authorization': `Bearer ${this.apiKey}` }
        }).then((response) => {
            this.records = response.data.records;
        });
    }
}

I’ve tried multiple approaches but cannot maintain the original sorting. Any suggestions on how to preserve the Airtable record sequence during Vue rendering?

2

yo, try adding sort param when u fetch data or use .sort() on ur records array b4 assignin to this.records. mayb add index field in airtable 2 keep track of original order? wrkd 4 me b4 :+1: