Skip to main content

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="record.id">

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

        {{record.fields[col]}}

      </span>

    </div>

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 () {

      axios({

        url: this.apiUrl + this.base,

        headers: {

          'Authorization': `Bearer ${this.apiKey}`

        }

      }).then((res) => {

        this.records = res.data.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

Reply


Terms & Conditions