Shawn
Shawn

Reputation: 219

How to remove everything before provided value

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

Answers (1)

Shawn
Shawn

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

Related Questions