Integrating external database records with Vue component

Other Questions Airtable
1

Fetching Database Records in Vue Application

I’m having trouble displaying data from an external database in my Vue component. I’ve been working on this for several hours but can’t seem to get the records to show up in my template.

I’m using a database API package to fetch the data, but the records array stays empty. Here’s my current setup:

<template>
  <div class="content-wrapper">
    <div class="container">
      <h2>{{ title }}</h2>
      <div class="data-grid">
        <ProductCard />
        <ul class="items-list">
          <li v-for="entry in dataEntries" :key="entry">
            Content: {{ entry }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import ProductCard from "../components/ProductCard.vue";
import DatabaseAPI from "database-package";

export default {
  name: "Dashboard",
  components: {
    ProductCard,
  },
  props: {
    title: String,
  },
  data() {
    return {
      dataEntries: [],
    };
  },
  mounted() {
    const connection = new DatabaseAPI({ token: "my-api-token" }).connect(
      "my-database-id"
    );

    connection("Products")
      .query({
        filter: "Main view",
      })
      .getAll(function (error, results) {
        if (error) {
          console.log(error);
          return;
        }
        results.forEach((result) => {
          console.log(result.field("Title"));
          return result.field("Title");
        });
      });
  },
};
</script>

The console shows the data correctly, but my dataEntries array remains empty. What am I missing to populate the reactive data properly?

2

You’re logging the data in the callback but never putting it into your dataEntries array. Your forEach loop just returns values into the void instead of collecting them. You need to populate dataEntries inside the getAll callback. Replace your forEach with: results.forEach((result) => { this.dataEntries.push(result.field(“Title”)); }); I hit the same issue when I started with Vue and external APIs. Vue’s reactivity only kicks in when you actually modify the data properties. Logging or returning values won’t trigger the reactive updates that make your template re-render.