将 Airtable 数据导入 Vue.js

Question

我是 vue js 的新手，并且已经尝试了几个小时将可播放的数据导入我的应用程序。我希望有人能帮助我，因为我觉得我快到了！我正在使用 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，我们在 anynomous 函数中执行 self.recordsList。

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

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

• 使用 Function.bind
• 异步/等待