Integrating Airtable records with Vue.js components

Other Questions Airtable
1

I’m struggling to connect my Vue.js app with Airtable database. I’ve been working on this for several hours but can’t seem to get it right. I’m using the official Airtable npm library to fetch records from my database. The problem is that I can see the data in the console but it’s not showing up in my template. Here’s what I have so far:

<template>
  <div class="content-wrapper">
    <h2>{{ title }}</h2>
    <div class="data-container">
      <MyComponent />
      <div v-if="items.length > 0">
        <div v-for="entry in items" :key="entry.id" class="item">
          Record: {{ entry }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MyComponent from "./MyComponent.vue";
import Airtable from "airtable";

export default {
  name: "DataView",
  components: {
    MyComponent,
  },
  props: {
    title: String,
  },
  data() {
    return {
      items: [],
    };
  },
  mounted() {
    const database = new Airtable({ apiKey: "your-api-key" }).base(
      "your-base-id"
    );

    database("Users")
      .select({
        view: "Main View",
      })
      .firstPage(function (error, data) {
        if (error) {
          console.error(error);
          return;
        }
        data.forEach((row) => {
          console.log(row.get("Username"));
          return row.get("Username");
        });
      });
  },
};
</script>

Can anyone help me understand what I’m missing? The console shows the data but my template remains empty.

2

You’re not actually assigning the fetched data to your reactive items array. That forEach loop just logs data to the console - it doesn’t update your component’s state. You need to collect the records and assign them to this.items so Vue can detect the change and re-render.

Try this in your mounted hook:

mounted() {
  const database = new Airtable({ apiKey: "your-api-key" }).base("your-base-id");
  
  database("Users")
    .select({ view: "Main View" })
    .firstPage((error, data) => {
      if (error) {
        console.error(error);
        return;
      }
      this.items = data.map(record => ({
        id: record.id,
        username: record.get("Username")
      }));
    });
}

Also update your template to {{ entry.username }} instead of {{ entry }}. This should fix your reactivity issue and display the data correctly.