Re: 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;
However, this prints, B, D, A, C in the browser.
Any help welcome.
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.
