Api Airtable-使用vue js格式化“多个选择”字段

Api Airtable-使用vue js格式化“多个选择”字段,api,vue.js,airtable,Api,Vue.js,Airtable,我不是一个程序员,更像是一个“frankencoder”——知道基本知识,但不太了解更复杂的JS内容。因此,只需使用提供的步骤将一些Airtable数据嵌入到一个基本的html格式中,我就可以设置样式 问题-Airtable中的常规文本字段结果良好,“多重选择”和“链接到另一条记录”字段结果不稳定,如下所示: 多选:[月球] 链接到另一条记录:[recRAgEcH3Y3t16md] 我不太关心到另一个记录的链接-我相信这会更复杂,但我希望多选字段正常显示,因为我将使用Airtable表单提交数据

我不是一个程序员,更像是一个“frankencoder”——知道基本知识,但不太了解更复杂的JS内容。因此,只需使用提供的步骤将一些Airtable数据嵌入到一个基本的html格式中,我就可以设置样式

问题-Airtable中的常规文本字段结果良好,“多重选择”和“链接到另一条记录”字段结果不稳定,如下所示: 多选:[月球] 链接到另一条记录:[recRAgEcH3Y3t16md]

我不太关心到另一个记录的链接-我相信这会更复杂,但我希望多选字段正常显示,因为我将使用Airtable表单提交数据,并希望保留多选选项

这是JSFIDLE

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-->
谢谢大家!

您将获得一个字段数组,因此您希望这样只显示文本,从而删除括号

{{ item['fields']['Kingdoms'].join(', ') }}

最好在这里隐藏您的密钥,还想显示倍数吗?谢谢-不关心这些数据,但请记住。是的,我想显示倍数