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

Other Questions Airtable
1

I’m working with Vue.js to show data from Airtable on my webpage. I’m more of a beginner when it comes to JavaScript, so I’m following some basic tutorials.

The problem: When I display regular text fields from Airtable, they show up perfectly. But multi-select fields and linked record fields display in a weird format:

  • Multi-select shows: [ “Fantasy” ]
  • Linked records show: [ “recABC123XYZ456” ]

I mainly want to fix the multi-select fields so they display the actual values instead of this array format. I’m using Airtable forms for data entry and need the multi-select options to show properly.

My Vue.js code:

var application = 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)
      })
    }
  }
})

My HTML template:

<div id="content">
  <div class="list">
    <div v-for="record in records" class="item">
      <h2>{{ record['fields']['FullName'] }}</h2>
      <p>Role: {{ record['fields']['Position'] }}</p>
      <p><strong>Alias: </strong>{{ record['fields']['Alias'] }}</p>
      <p><strong>Categories: </strong>{{ record['fields']['Categories'] }}</p>
      <p><strong>Groups: </strong>{{ record['fields']['Groups'] }}</p>
      <p><strong>Contact: </strong>{{ record['fields']['Contact'] }}</p>
    </div>
  </div>            
</div>

How can I make the multi-select field values display as normal text instead of the array format?

2

vue is just showing the raw data from airtable. for fixing the multi-select fields, you can do something like this: {{ record['fields']['Categories'].join(', ') }} in your template. this should display them as normal text, not in array format.

3

The array format you’re seeing is actually the correct structure that Airtable returns for multi-select fields. What you need is to transform this data before displaying it. Instead of modifying each template expression, I’d recommend processing the data in your component methods. You could add a computed property or modify your fetchData method to clean up the multi-select fields. For example, after getting the records, loop through them and convert arrays to strings using something like record.fields.Categories = record.fields.Categories ? record.fields.Categories.join(', ') : ''. This approach keeps your templates cleaner and handles cases where the field might be empty. I’ve used this pattern in several projects and it works much better than handling the formatting in the template itself.