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