Airtable 数据进入 Vue.js

Question

我是 vue js 的新手，并且已经尝试了几个小时才能将 airtable 数据导入我的应用程序。我希望有人能帮助我，因为我觉得我快到了！我正在使用 Airtable NPM 包来检索数据 - https://www.npmjs.com/package/airtable

    <template>
  <section id="cards-section" class="cards-section">
    <div class="centered-container w-container">
      <h1>{{ msg }}</h1>
      <div class="cards-grid-container">
        <Card />
        <ul id="example-1">
          <li v-for="item in recordsList" v-bind:key="item">
            data here {{ item }}
          </li>
        </ul>
      </div>
    </div>
  </section>
</template>

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

export default {
  name: "Main",
  components: {
    Card,
  },
  props: {
    msg: String,
  },
  data() {
    return {
      recordsList: [],
    };
  },
  mounted() {
    const base = new Airtable({ apiKey: "******" }).base(
      "******"
    );

    base("Table 1")
      .select({
        view: "Grid view",
      })
      .firstPage(function (err, records) {
        if (err) {
          console.error(err);
          return;
        }
        records.forEach( (record) => {
          console.log(record.get("Name"));
          return record.get("Name")
        });
      });
  },
};
</script>

<style scoped>
</style>

Answer 1

查看您的代码，您可能正处于已成功从 airtable 检索数据并在 console.log.

中看到一些记录的阶段

现在如何将它们从该函数内部获取到您的 Vue 实例：

我将向您展示两种解决此问题的方法，稍后再进行解释：

方法 1：使用对自身的引用。

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

export default {
  name: "Main",
  components: {
    Card,
  },
  props: {
    msg: String,
  },
  data() {
    return {
      recordsList: [],
    };
  },
  mounted() {
    // create a reference to this vue instance here.
    var self = this;

    const base = new Airtable({ apiKey: "******" }).base(
      "******"
    );

    base("Table 1")
      .select({
        view: "Grid view",
      })
      .firstPage(function (err, records) {
        if (err) {
          console.error(err);
          return;
        }

        // now we can set the recordList of our
        // vue instance: 
        self.recordsList = records;
      });
  },
};
</script>

方法二：使用javascript箭头函数：

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

export default {
  name: "Main",
  components: {
    Card,
  },
  props: {
    msg: String,
  },
  data() {
    return {
      recordsList: [],
    };
  },
  mounted() {
    // no need to create a reference this time.

    const base = new Airtable({ apiKey: "******" }).base(
      "******"
    );

    base("Table 1")
      .select({
        view: "Grid view",
      })
      .firstPage( (err, records) => {
        if (err) {
          console.error(err);
          return;
        }

        this.recordsList = records;

      });
  },
};
</script>

现在出了什么问题？在第一个示例中，我们使用普通的 javascript 匿名函数。 this 在一个普通的 javascript 匿名函数中并不是你所期望的那样。我们通过在某处定义对 this (var self = this) 的引用来解决这个问题，而不是尝试 this.recordsList 我们在我们的任意函数中做 self.recordsList。

Nem 对 javascript 语言的改进引入了另一种函数，即箭头函数。这个函数的一个好处是这个函数内部的 this 是你定义它的对象。所以，this 是我们的 vue 实例。现在我们没有问题，可以设置 this.recordsList.

我忽略的其他解决方案是：

使用Function.bind
async/await

Airtable 数据进入 Vue.js

Airtable data into Vue.js

vue.js

vuejs2

airtable