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

[Aly_Sebastien]

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>

[JonathanBowen]

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