Vue.js - Display Airtable multi-select field values properly

Other Questions Airtable
1

Need help with Airtable API data display

I’m pretty new to coding and trying to show data from Airtable in a webpage using Vue.js. Most fields work fine, but I’m having trouble with multiple select fields.

The problem

When I fetch data from Airtable, regular text shows up normally but multiple select fields appear like this: [ "Option1" ] instead of just showing Option1.

My code setup

JavaScript:

var myApp = new Vue({
  el: '#content',
  data: {
    records: []
  },
  mounted: function(){
    this.fetchData(); 
  },
  methods: {
    fetchData: function(){
      var component = this
      var database_id = "---"
      var api_token = "---"
      this.records = []
      axios.get(
        "https://api.airtable.com/v0/"+database_id+"/People?view=Main%20view",
        { 
          headers: { Authorization: "Bearer "+api_token } 
        }
      ).then(function(result){
        component.records = result.data.records
      }).catch(function(err){
        console.log(err)
      })
    }
  }
})

HTML template:

<div id="content">
  <div v-for="record in records">
    <h2>{{ record['fields']['FullName'] }}</h2>
    <p>Role: {{ record['fields']['JobTitle'] }}</p>
    <p><strong>Skills: </strong>{{ record['fields']['SkillSet'] }}</p>
    <p><strong>Department: </strong>{{ record['fields']['Team'] }}</p>
  </div>
</div>

How can I make the multiple select field display as normal text instead of showing the array brackets and quotes?

2

Multi-select fields from Airtable return as JavaScript arrays - that’s why you’re seeing brackets. I create a computed property or filter to handle the conversion. Add something like formatMultiSelect(field) { return field && field.length ? field.join(', ') : 'None' } to your Vue instance, then use {{ formatMultiSelect(record['fields']['SkillSet']) }} in your template. This handles formatting and empty fields in one spot. My first Airtable integration broke on records with missing data - learned that lesson fast. Plus it keeps your template way cleaner if you’ve got multiple multi-select fields.

3

yeah, that array display issue is annoying but there’s an easy fix. skip adding methods and just use a ternary operator in your template: {{ record['fields']['SkillSet'] ? record['fields']['SkillSet'].join(' | ') : 'no skills listed' }}. i use pipes instead of commas - looks way cleaner. works for any multi-select field from airtable.

4

Yeah, those array brackets are just Vue’s default way of rendering arrays. Hit the same issue when I built a team directory pulling from Airtable.

I handle the formatting right in the template with a quick check. Change your skills field to:

<p><strong>Skills: </strong>{{ record['fields']['SkillSet'] && record['fields']['SkillSet'].length > 0 ? record['fields']['SkillSet'].join(', ') : 'Not specified' }}</p>

This checks if the field exists and has values before joining them. The join method turns your array into a clean comma-separated string.

Learned this the hard way when our production app kept crashing on empty records. Always add that existence check first now.

If you want to dive deeper into Airtable’s API, this tutorial’s solid:

For multiple multi-select fields, you might want a method to keep your template cleaner. But for just a couple fields, inline works fine.

5

Everyone’s suggesting manual coding, but automation will save you way more time here.

I hit this same Airtable formatting nightmare on a client portal. Skip the custom Vue methods and null checks - set up a flow that cleans your data before it reaches the frontend.

The automation pulls from Airtable, converts those multi-select arrays to clean strings, and feeds your Vue app perfectly formatted data. No more ugly brackets or crashes from empty fields.

Your Vue template stays simple:

<p><strong>Skills: </strong>{{ record['fields']['SkillSet'] }}</p>

Done. Data arrives as “Option1, Option2, Option3” instead of arrays.

You can also add formatting rules, handle validation, or cache responses without touching frontend code. Way more scalable than hardcoding array joins everywhere.

Saved me about 20 hours debugging edge cases with weird data structures.

6

This happens because Airtable sends multi-select fields as arrays, and Vue just displays them raw - brackets, quotes and all. I hit the exact same issue when I started using Airtable’s API. You need to join the array values before showing them. Instead of displaying the field directly, use JavaScript’s join method to turn it into a readable string. Change your template to {{ record['fields']['SkillSet'].join(', ') }} for multi-select fields. Just watch out - if the field’s empty, you’ll get an error calling join on undefined. Add a check to make sure the field exists and has values before joining. Otherwise your app will break on records with empty multi-selects.