Vue.js: How to format URL fields from Airtable?

Other Questions Airtable
1

Hey everyone! I’m working on a project where I need to display data from Airtable using Vue.js. I’ve got the basic setup working, but I’m stuck on how to properly format the URL fields.

Here’s what I’ve tried so far:

<div id="app">
  <ul>
    <li v-for="record in records">
      <h3>{{ record.fields.Name }}</h3>
      <a :href="record.fields.Website.url" v-if="record.fields.Website">
        <p>Description: {{ record.fields.Description }}</p>
      </a>
      <p>
        <strong>Website: </strong>
        {{ record.fields.Website }}
      </p>                
    </li>
  </ul>            
</div>

And the Vue.js part:

new Vue({
  el: "#app",
  data: {
    records: []
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      const apiKey = 'your-api-key';
      const baseId = 'your-base-id';
      
      axios.get(`https://api.airtable.com/v0/${baseId}/TableName`, {
        headers: { Authorization: `Bearer ${apiKey}` }
      })
      .then(response => {
        this.records = response.data.records;
      })
      .catch(error => console.error(error));
    }
  }
});

The data is showing up, but the URL fields aren’t formatting correctly as clickable links. Any ideas on how to fix this? Thanks!

2

hey harry, i had similar troubles with airtable urls. try changing ur template like this:

{{ record.fields.Website }}

this should work if Website is a string. if its an object, u might need to use Website.url instead. hope this helps!

3

I’ve encountered a similar issue when working with Airtable and Vue.js. The problem likely stems from how Airtable returns URL fields. They’re often nested objects rather than simple strings.

To resolve this, you can modify your template to handle the URL structure correctly:

<a :href=\"record.fields.Website.url\" v-if=\"record.fields.Website\">
  {{ record.fields.Website.url }}
</a>

This change assumes the Website field contains a ‘url’ property. If it doesn’t, you might need to adjust based on the actual structure of your Airtable data.

Additionally, consider error handling for cases where the Website field might be empty or malformed. This approach should resolve your formatting issues and create proper clickable links.