Vue.js - Display multi-select fields from Airtable properly

Other Questions Airtable
1

Need help with Airtable multi-select field display

I’m working with Vue.js to show data from Airtable on my website. I’m pretty new to coding so I followed some basic tutorials to get started.

The problem: Regular text fields display perfectly, but multi-select fields show up weird like this: [ "Option1" ] instead of just showing Option1. Same thing happens with linked record fields but I care more about fixing the multi-select ones.

I’m using Airtable forms for people to submit data and want to keep the multiple choice options working properly on the display side.

Here’s my Vue code:

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

And the HTML template:

<div id="content">
  <div class="card-list">
    <div v-for="record in records" class="card">
      <h2>{{ record['fields']['FullName'] }}</h2>
      <p>Position: {{ record['fields']['JobTitle'] }}</p>
      <p><strong>Tags: </strong>{{ record['fields']['Categories'] }}</p>
      <p><strong>Skills: </strong>{{ record['fields']['Expertise'] }}</p>
      <p><strong>Location: </strong>{{ record['fields']['City'] }}</p>
    </div>
  </div>
</div>

How can I make the multi-select fields show as normal text instead of array format? Thanks for any help!

2

To display multi-select fields properly in Vue.js, you need to convert the array into a string format that can be easily read. Airtable presents these fields as arrays, which is why you’re seeing the bracketed output. One approach is to create a method within your Vue instance that formats these arrays into a readable string. For instance, you might define a formatArray method:

methods: {
  fetchData: function() {
    // existing fetchData code
  },
  formatArray: function(arr) {
    return arr && arr.length ? arr.join(', ') : 'None';
  }
}

Then, in your HTML template, you can use this method like so:

<p><strong>Tags: </strong>{{ formatArray(record['fields']['Categories']) }}</p>
<p><strong>Skills: </strong>{{ formatArray(record['fields']['Expertise']) }}</p>

This way, if the array is empty, it will display ‘None’ instead of an empty representation, and you have the flexibility to change how the items are separated.

3

multiselects are just arrays, so you gotta join 'em. just swap {{ record['fields']['Categories'] }} to {{ record['fields']['Categories'].join(', ') }} in your html. itll turn the array into a nice, comma-seprated string instead of those brackets.