Vue.js - Converting URL field data from Airtable into clickable links

[liamj]

Working with Airtable URL fields in Vue.js

I’m trying to display data from Airtable in my Vue app and running into trouble with URL fields. I followed a basic tutorial to connect to the Airtable API but I can’t figure out how to properly convert the URL data into working links.

The problem: The URL field from Airtable isn’t displaying as a clickable link like I expected.

Here’s my current Vue template:

<div id="main">
    <div class="content">
        <div v-for="record in records" :key="record.id">
            <h2>{{ record['fields']['CompanyName'] }}</h2>
            <a :href="record['fields']['Website']['url']" v-if="record['fields']['Website']">
                <span>Visit: {{ record['fields']['Description'] }}</span>
            </a>
            <div>
                <strong>URL: </strong>
                {{ record['fields']['Website'] }}
            </div>                
        </div>
    </div>            
</div>

And my Vue instance:

new Vue({
  el: "#main",
  data() {
    return {
      records: []
    }
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      const vm = this;
      const baseId = "your-base-id";
      const apiKey = "your-api-key";
      
      axios.get(
        `https://api.airtable.com/v0/${baseId}/Companies?view=Main%20View`,
        {
          headers: { 
            Authorization: `Bearer ${apiKey}` 
          }
        }
      )
      .then(res => {
        vm.records = res.data.records;
      })
      .catch(err => {
        console.error(err);
      });
    }
  }
});

What’s the correct way to handle URL field types from Airtable in Vue? Any help would be great!

[DancingButterfly]

I encountered a similar situation with Airtable URL fields. The key detail is that the URL field returns an object that includes a url property instead of being a simple string. Your usage of record['fields']['Website']['url'] is correct for the href attribute; however, ensure you are displaying just the URL in the div. You should modify {{ record['fields']['Website'] }} to {{ record['fields']['Website']['url'] }} to show the correct link. Additionally, adding target="_blank" to your anchor tag is advisable for opening links in new tabs, which improves user experience. Lastly, always verify the existence of the URL field before accessing its properties to avoid potential errors on records lacking URLs.

[danielr]

Been dealing with Airtable integrations for years and this trips up a lot of people.

Your template’s got the right idea but there’s a disconnect. You’re accessing record['fields']['Website']['url'] correctly in the href, but then you’re displaying the entire object with {{ record['fields']['Website'] }} in the div below.

Here’s the fix:

<div v-for="record in records" :key="record.id">
    <h2>{{ record['fields']['CompanyName'] }}</h2>
    <a :href="record['fields']['Website']['url']" v-if="record['fields']['Website']">
        <span>Visit: {{ record['fields']['Description'] }}</span>
    </a>
    <div v-if="record['fields']['Website']">
        <strong>URL: </strong>
        {{ record['fields']['Website']['url'] }}
    </div>                
</div>

The main issue is that last div. You need to access the url property there too.

I wrapped that div in a v-if check because Airtable returns null or undefined for empty URL fields, which breaks your template.

One more thing - I usually add basic URL validation since users put incomplete URLs in Airtable. Check if it starts with http:// or https://. Saves you from broken links later.

[ClimbingLion]

airtable url fields can be a bit confusing! you gotta remember that when you call {{ record['fields']['Website'] }}, you’re getting the whole object, not just the url. try using {{ record['fields']['Website']?.url }} for your link. also, make sure to add some error checking for those empty urls – it’ll save ya from crashing the app!