Ordering issues in Vue2 with Airtable data - How to maintain sequence in v-for loop?

Other Questions Airtable
1

I’m struggling with a Vue2 CLI and Airtable integration. My v-for loop displays data, but it’s all jumbled up. I’ve tried to match the Airtable base order, but no luck.

Here’s a simplified version of my component:

<template>
  <div v-for="item in items" :key="item.Name">
    <h3>{{ item.fields.Name }}</h3>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      items: [],
      apiEndpoint: 'https://api.airtable.com/v0/myBaseId/myTableName',
      apiKey: 'mySecretKey'
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      axios.get(this.apiEndpoint, {
        headers: { Authorization: `Bearer ${this.apiKey}` }
      }).then(response => {
        this.items = response.data.records
      })
    }
  }
}
</script>

The Airtable shows A, B, C, D but the browser displays B, D, A, C. Any ideas on how to fix this? Thanks!

2

I’ve dealt with this exact issue before, and it can be frustrating. One solution that worked for me was to use Airtable’s built-in ‘createdTime’ field for sorting. It’s automatically added to every record and usually reflects the order you’ve entered data.

Try modifying your API call like this:

fetchData() {
  axios.get(`${this.apiEndpoint}?sort[0][field]=createdTime&sort[0][direction]=asc`, {
    headers: { Authorization: `Bearer ${this.apiKey}` }
  }).then(response => {
    this.items = response.data.records
  })
}

This approach maintains the original input order without needing to add an extra field. If you need a custom order, consider adding an ‘Order’ field in Airtable and sort by that instead. Just remember to update it whenever you change the desired sequence.

3

I’ve encountered a similar issue when working with Airtable and Vue. The problem likely stems from how Airtable returns data, which isn’t always in the order you see in the base. To maintain the sequence, you can use the ‘sort’ parameter in your API request.

Modify your fetchData method like this:

fetchData() {
  axios.get(`${this.apiEndpoint}?sort[0][field]=Name`, {
    headers: { Authorization: `Bearer ${this.apiKey}` }
  }).then(response => {
    this.items = response.data.records
  })
}

This tells Airtable to sort the records by the ‘Name’ field before sending them. Adjust ‘Name’ to whatever field you’re using for ordering. If you need a custom sort order, consider adding a ‘Sort Order’ field in your Airtable and use that for sorting instead.

4

hey there! i had this problem too. try using the ‘sortField’ option when you fetch data from airtable. it’s like:

axios.get(${this.apiEndpoint}?sortField=Name&sortDirection=asc, …)

this should keep your items in order. hope it helps!