I’m reaching out again with another inquiry about how to properly format data retrieved from Airtable using Vue.js. I’m following the instructions provided to insert some Airtable data into a simple HTML layout for styling purposes. However, I am encountering a challenge: what is the correct approach to format the data as a hyperlink? I have a feeling my current method may not be effective. Below is a modified version of my HTML and JavaScript code dealing with this issue.
HTML Code Example:
<div id="app">
<ul>
<li v-for="entry in entries">
<h3>{{ entry['fields']['UserName'] }}</h3>
<a :href="entry['fields']['Website']['url']" v-if="entry['fields']['Website']">
<p>Display: {{ entry['fields']['Description'] }}</p>
</a>
<p>
<strong>Website: </strong>
{{ entry['fields']['Website'] }}
</p>
</li>
</ul>
</div>
JavaScript Code Example:
var instance = new Vue({
el: "#app",
data: {
entries: []
},
mounted: function() {
this.fetchEntries();
},
methods: {
fetchEntries: function() {
var that = this;
var airtableId = "---";
var airtableKey = "---";
this.entries = [];
axios
.get(
"https://api.airtable.com/v0/" + airtableId + "/People?view=Grid%20View",
{
headers: { Authorization: "Bearer " + airtableKey }
}
)
.then(function(result) {
that.entries = result.data.records;
})
.catch(function(err) {
console.error(err);
});
}
}
});