我不是编码员，更像是“frankencoder”——了解基础知识，但不太了解更复杂的 JS 内容。因此，只需使用此处提供的步骤将一些 Airtable 数据嵌入到我可以设置样式的基本 html 格式中。
问题 - Airtable 中的常规文本字段结果很好，“多选”和“链接到另一条记录”字段变得很奇怪，如下所示：多选：[“Lunar”] 链接到另一条记录：[“recRAgEcH3Y3t16md”]
我不太关心指向另一条记录的链接 - 我确信这更复杂，但我希望多选字段正常显示，因为我将使用 Airtable 表单提交数据并希望保留多项选择选项。
这是这里的 JSFiddle
JS：
var app = new Vue({
el: '#app',
data: {
items: []
},
mounted: function(){
this.loadItems();
},
methods: {
loadItems: function(){
// Init variables
var self = this
var app_id = "---";
var app_key = "---";
this.items = []
axios.get(
"https://api.airtable.com/v0/"+app_id+"/Characters?view=Grid%20view",
{
headers: { Authorization: "Bearer "+app_key }
}
).then(function(response){
self.items = response.data.records
}).catch(function(error){
console.log(error)
})
}
}
})
和html：
<div id="app">
<ul>
<li v-for="item in items">
<h3>{{ item['fields']['Name'] }}</h3>
<p>Title: {{ item['fields']['Title'] }}</p>
<p><strong>Nickname: </strong>{{ item['fields']['Nickname'] }}</p>
<p><strong>Courts: </strong>{{ item['fields']['Courts'] }}</p>
<p><strong>Kingdoms: </strong>{{ item['fields']['Kingdoms'] }}</p>
<p><strong>Partner: </strong>{{ item['fields']['Partner'] }}</p>
</li>
</ul>
</div><!--app-->
谢谢！