将可播放数据导入Vue.js

我是vue js新手，数小时来一直在尝试将airtable数据导入我的应用程序。我希望有人能帮助我，因为我觉得我快到了！我正在使用Airtable NPM包检索数据-

{{msg}}


此处的数据{{item}


从“./components/Card.vue”导入卡；
从“Airtable”导入Airtable；
导出默认值{
名称：“主要”，
组成部分：{
卡片
},
道具：{
msg:String，
},
数据（）{
返回{
记录列表：[]，
};
},
安装的（）{
const base=new Airtable（{apiKey:********}）.base(
"******"
);
基数（“表1”）
.选择({
视图：“网格视图”，
})
.首页（功能（错误、记录）{
如果（错误）{
控制台错误（err）；
返回；
}
记录。forEach（（记录）=>{
console.log（record.get（“Name”））；
返回记录。获取（“名称”）
});
});
},
};

查看您的代码，您可能正处于从airtable成功检索数据的阶段，并在console.log中看到一些记录

现在，如何将它们从该函数内部传送到Vue实例：

我将向您展示两种方法，并在稍后进行解释：

方法1：使用对self的引用

<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>

从“./components/Card.vue”导入卡；
从“Airtable”导入Airtable；
导出默认值{
名称：“主要”，
组成部分：{
卡片
},
道具：{
msg:String，
},
数据（）{
返回{
记录列表：[]，
};
},
安装的（）{
//在此处创建对此vue实例的引用。
var self=这个；
const base=new Airtable（{apiKey:********}）.base(
"******"
);
基数（“表1”）
.选择({
视图：“网格视图”，
})
.首页（功能（错误、记录）{
如果（错误）{
控制台错误（err）；
返回；
}
//现在我们可以设置我们的记录列表
//vue实例：
self.recordsList=记录；
});
},
};

方法2：使用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>

从“./components/Card.vue”导入卡；
从“Airtable”导入Airtable；
导出默认值{
名称：“主要”，
组成部分：{
卡片
},
道具：{
msg:String，
},
数据（）{
返回{
记录列表：[]，
};
},
安装的（）{
//这次不需要创建引用。
const base=new Airtable（{apiKey:********}）.base(
"******"
);
基数（“表1”）
.选择({
视图：“网格视图”，
})
.firstPage（（错误，记录）=>{
如果（错误）{
控制台错误（err）；
返回；
}
this.recordsList=记录；
});
},
};

现在是什么问题？在第一个示例中，我们使用一个普通的javascript匿名函数

这是普通javascript匿名函数中的

，并不是您所期望的。我们通过在某处定义对此的引用（var self=this）来解决这个问题，而不是尝试this.recordsList，而是在anynomous函数中执行self.recordsList

Nem对javascript语言的改进引入了另一种类型的函数，箭头函数。此函数的一个好处是，此函数中的

this

是您在其中定义它的对象。因此，

这是我们的vue实例。现在我们没有问题了，可以设置这个.recordsList

我推荐的其他解决方案有：


使用Function.bind
异步/等待
哇，非常感谢您如此透彻的解释。不过，我还有一个问题要问。我的模板仍然有问题。循环现在可以工作并且显示所有
元素，但是我无法获得要渲染的属性，例如{{item}}正确地显示原始数据。我希望呈现类似item.fields.name的内容。您是否尝试过类似{{item.field.name}}的内容，或者这会导致错误？别担心，完全是我的错。它应该是大写N的名字。你帮我省了一个大麻烦。非常感谢你！不客气！
<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>