Using Vue.js to Style 'Multiple Select' Fields in Airtable

Other Questions Airtable
1

I’m not a professional coder; I have basic knowledge but struggle with advanced JavaScript concepts. I’m following the guidelines to integrate Airtable data into a simple HTML layout that I can style.

The problem I’m facing is that while regular text fields from Airtable display correctly, the ‘Multiple Select’ and ‘Link to another record’ fields do not render as expected. For instance:

  • Multiple Select: [ “Lunar” ]
  • Link to another record: [ “recRAgEcH3Y3t16md” ]

I am not focused on fixing the ‘Link to another record’ formatting since I believe it’s more complex, but I would like the ‘Multiple Select’ field to display properly, as I intend to use Airtable forms for collecting data and require multiple choice options.

Here is an example of my JavaScript:

var vueInstance = new Vue({
	el: '#vueApp',
	data: {
		records: []
	},
	mounted: function() {
		this.fetchRecords();
	},
	methods: {
		fetchRecords: function() {
			var vm = this;
			var baseId = '---';
			var apiKey = '---';
			this.records = [];
			axios.get(
				`https://api.airtable.com/v0/${baseId}/Characters?view=Grid%20view`,
				{
					headers: { Authorization: `Bearer ${apiKey}` }
				}
			).then(function(res) {
				vm.records = res.data.records;
			}).catch(function(err) {
				console.error(err);
			});
		}
	}
});

And my HTML:

<div id="vueApp">
	<ul>
		<li v-for="record in records">
			<h3>{{ record['fields']['Name'] }}</h3>
			<p>Title: {{ record['fields']['Title'] }}</p>
			<p><strong>Nickname: </strong>{{ record['fields']['Nickname'] }}</p>
			<p><strong>Courts: </strong>{{ record['fields']['Courts'] }}</p>
			<p><strong>Kingdoms: </strong>{{ record['fields']['Kingdoms'] }}</p>
			<p><strong>Partner: </strong>{{ record['fields']['Partner'] }}</p>
		</li>
	</ul>
</div><!--vueApp-->

Any assistance would be greatly appreciated!

2

I’ve worked with Vue.js and Airtable before, so let me provide some insights that might help you. Concerning the ‘Multiple Select’ field, it seems you’re obtaining an array, which is expected. To display it properly, you can use Vue’s built-in directives to iterate over the array and render each item. In your HTML, instead of displaying the whole array as is, try something like <span v-for="option in record['fields']['Courts']">{{ option }} </span>. This should iterate over each tag in your ‘Multiple Select’ field and display them individually. You can also add some custom CSS to improve the visual style of these options, if needed.