Ordering v-for elements from Airtable API in Vue 2 application

Other Questions Airtable
1

I’m working on a Vue 2 project that pulls data from Airtable but I’m having trouble with the display order. When I loop through my data using v-for, the items show up in a different order than what I have in my Airtable base.

Template code:

<div class="item-container" v-for="item in items" :key="item.Name">
    <h3>{{ item['fields']['Name'] }}</h3>
</div>

Component script:

import axios from 'axios'

export default {
  data() {
    return {
      baseUrl: 'https://api.airtable.com/v0/',
      token: 'patABC123XYZ',
      tableId: 'appXYZ987654/MyTable',
      items: []
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      axios({
        url: this.baseUrl + this.tableId,
        headers: {
          'Authorization': `Bearer ${this.token}`
        }
      }).then((response) => {
        this.items = response.data.records
      })
    }
  }
}

In my Airtable I have items arranged as 1, 2, 3, 4 but they render as 2, 4, 1, 3 in the browser. How can I make sure the order matches what I see in Airtable?

2

I’ve hit this same problem for years across different projects. The API sorting works well, but there’s a gotcha nobody’s mentioned.

With 100+ records, Airtable paginates results. Your sorting breaks across pages since each page sorts independently. You need to handle pagination:

fetchData() {
  const sortParam = '?sort[0][field]=Name&sort[0][direction]=asc&pageSize=100'
  
  const getAllRecords = async (url, allRecords = []) => {
    const response = await axios({
      url: url,
      headers: { 'Authorization': `Bearer ${this.token}` }
    })
    
    const records = [...allRecords, ...response.data.records]
    
    if (response.data.offset) {
      return getAllRecords(`${url}&offset=${response.data.offset}`, records)
    }
    
    return records
  }
  
  getAllRecords(this.baseUrl + this.tableId + sortParam)
    .then(records => {
      this.items = records
    })
}

For small datasets, just add an ‘Order’ number field in Airtable and sort by that. Way cleaner and you get visual control in the base.

3

you could also sort on the frontend after fetching. just add a computed property or use array.sort() in your component - something like this.items.sort((a, b) => a.fields.Name.localeCompare(b.fields.Name)) after you get the response. not as efficient as server-side sorting, but it works if you don’t want to deal with URL params.

4

That’s actually normal behavior. Airtable’s API doesn’t keep any specific order unless you tell it to. Your base might look organized, but the API pulls records based on internal IDs, which won’t match what you see visually.

You need to add sorting to your API request. Update your fetchData method with a sort parameter. If you want to sort by “Order” or “Name”, it’d look like this:

fetchData() {
  const sortParam = '?sort[0][field]=Name&sort[0][direction]=asc'
  axios({
    url: this.baseUrl + this.tableId + sortParam,
    headers: {
      'Authorization': `Bearer ${this.token}`
    }
  }).then((response) => {
    this.items = response.data.records
  })
}

Or just create a number field in Airtable specifically for ordering and sort by that. Gives you total control over the sequence.