I'm not a coder, more like a 'frankencoder' - know the basics, but not so much the more complicated JS stuff. So just using the steps provided here to embed some Airtable data into a basic html format that I can style.
The issue - Regular text fields from Airtable turn out fine, the 'Multiple Select' and 'Link to another record' field turn out wonky, like so: Multiple Select: [ "Lunar" ] Link to another record: [ "recRAgEcH3Y3t16md" ]
I'm not so concerned with the Link to another record - I'm sure that's more complicated, but I'd like the Multiple Select field to show normally, since I'll be using Airtable forms for data submission and would like to keep multiple choice options.
Here's the JSFiddle here
The 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)
})
}
}
})
and the 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-->
Thank you!
you are getting an array of fields, so you do like this to display just the text and thereby removing the brackets.
{{ item['fields']['Kingdoms'].join(', ') }}