How can I use the API to retrieve data from my Base for use in my VueJS CLI project?

I currently have a VueJS project up and running locally. However, I am now trying to get the data stored in my Airtable Base and use a Vue JS v-for loop to display it.

I have installed axios as a dependency (using npm), followed the steps in this tutorial Airtable + Vue.js for Static Websites - TaxJar Developers and now have a v-for loop, using a slightly different HTML tag, in my template.

After inspecting the DOM I can see that the for loop prints a span tag for every record I create in my Base. In one way my JS must be connected to the Base, However, these span tags are empty and I am still struggling with getting the data from the BASE.

    <div v-for="record in records" :key="">
      <span v-for="(col, colIndex) in columns" :key=" + '-' + colIndex">

Hi @Aly_Sebastien - it is this part of the code you link to that gets the Airtable data into the variable records:

  methods: {
    getData: function () {
        url: this.apiUrl + this.base,
        headers: {
          'Authorization': `Bearer ${this.apiKey}`
      }).then((res) => {
        this.records =;

Once you’ve got data into records this is the thing that is iterated through to display records on the page:

<div v-for="record in records" ....

Although a few years old, this article is similar and put it all together at the end, so might be worth looking at

1 Like

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