Vue.js: How to format 'multiple select' fields from Airtable?

Other Questions Airtable
1

Hey everyone! I’m having trouble with Airtable data in my Vue.js app. I’m pretty new to coding, so bear with me.

I’ve got most of my Airtable fields showing up fine, but the ‘Multiple Select’ ones are coming out weird. They look like this: [ "Lunar" ] instead of just ‘Lunar’.

I’m using axios to fetch data from the Airtable API. Here’s a simplified version of my code:

const app = new Vue({
  el: '#app',
  data: { characters: [] },
  mounted() {
    this.fetchCharacters();
  },
  methods: {
    fetchCharacters() {
      axios.get('https://api.airtable.com/v0/myBaseId/Characters', {
        headers: { Authorization: 'Bearer myApiKey' }
      })
      .then(response => {
        this.characters = response.data.records;
      })
      .catch(error => console.log(error));
    }
  }
});

In my template, I’m just using {{ character.fields.Courts }} to display the ‘Courts’ field, which is a Multiple Select in Airtable.

Any ideas on how to make these fields show up normally? Thanks for your help!

2

hey there! i’ve dealt with this before. the multiple select fields come as arrays, so you gotta handle them differently. try this in your template:

{{ character.fields.Courts.join(', ') }}

this’ll give you a nice comma-separated list without the brackets. hope it helps!

3

I’ve run into this issue before when working with Airtable and Vue. The trick is to remember that multiple select fields come back as arrays, even if there’s only one item selected. Here’s what I typically do to handle this:

In your Vue template, you can use the join method to convert the array to a string:

{{ character.fields.Courts.join(', ') }}

This will display all selected values in a neat, comma-separated list.

If you want more control, you could create a computed property:

computed: {
formattedCourts() {
return this.character.fields.Courts.join(’ | ');
}
}

Then in your template, just use {{ formattedCourts }}. This approach gives you flexibility to format the output however you want.

One last tip - always check if the field exists before trying to join it, to avoid errors with undefined fields. You can use a v-if directive or the optional chaining operator (?.) for this.

4

I’ve encountered this issue with Airtable’s Multiple Select fields in Vue. The key is understanding that these fields return as arrays, even for single selections. Here’s a practical approach:

In your Vue template, use the join method to convert the array to a string:

{{ character.fields.Courts.join(', ') }}

This presents a clean, comma-separated list.

For more flexibility, consider a computed property:

computed: {
formattedCourts() {
return this.character.fields.Courts.join(’ | ');
}
}

Then use {{ formattedCourts }} in your template. This method allows custom formatting.

Remember to handle potential undefined fields to avoid errors. Use v-if or the optional chaining operator (?.) as safeguards.

These techniques should resolve your formatting issues while maintaining clean, readable code.