Airtable-使用Vue JS格式化“多项选择”字段

时间:2018-08-04 02:22:20

标签: api vue.js airtable

我不是编码员,更像是“ frankencoder”,虽然了解基础知识,但对复杂的JS知识却不甚了解。因此,只需使用提供的here步骤将一些Airtable数据嵌入我可以设置样式的基本html格式即可。

问题-Airtable的常规文本字段显示很好,“ Multiple Select”和“ Link to another record”字段显示出异常,如下所示: 多项选择:[“农历”] 链接到另一条记录:[“ recRAgEcH3Y3t16md”]

我不太关心与另一条记录的链接-我相信这更复杂,但是我希望“多选”字段能够正常显示,因为我将使用Airtable表单提交数据,并且喜欢保留多个选择选项。

这是JSFiddle here

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

谢谢!

1 个答案:

答案 0 :(得分:0)

您将获得array个字段,因此您确实希望仅显示文本并因此删除括号。

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