Reputation: 219
I am using Bootstrap Vue and would like to use a formatter callback to insert html into a column inside the table. The Bootstrap documentation example formats the link as an anchor link Ex. https://bootstrap-vue.js.org/docs/components/table/#shirley-partridge
<b-table striped responsive hover :items="episodes" :fields="fields">
<template v-slot:cell(version)="data">
<a :href="`${data.value.replace(/[^a-z]+/i,'-').toLowerCase()}`">{{ data.value }}</a>
</template>
</b-table>
I am pulling in a full url from the version property and would like to only use this url in the template, how can I remove everything before my url using the formatter?
this.episodes = response.map((item) => {
return {
category: item.fields.title,
episode_name: item.fields.splash,
episode_acronym: item.fields.description,
version: 'https://myurl/webinars' + item.fields.slug + '/' +'test',
}
})
Desired link would be https://myurl/webinars....
Upvotes: 2
Views: 56
Reputation: 219
I was able to get this working, by keeping the relative url format, and updating the formatter with a - instead of a + sign
<a :href="`${data.value.replace(/[^a-z]-/i,'-').toLowerCase()}`">Definition</a>
Upvotes: 1