Regex in vue js template

Question

Hello I have this property: text, and it contains a url but as plain text. I want to convert the url so it will be clickable.

<template>
    <div>
        <button class="fas fa-angle-down jwsingle__player__text__toggle" @click="toggle" :class="{ 'jwsingle__player__text__toggle--active': isOpen }">
        </button>
        <div v-show="isOpen" class="jwsingle__player__text__description">
            {{ text }}
        </div>
    </div>
</template>
<script>    
    export default {
        name: 'jwplayer-text-toggle',
        props: {
            text: {
                type: String,
            },
        },
        data() {
            return {
                isOpen: false,
            }
        },
        methods: {
            toggle() {
                this.isOpen = !this.isOpen;
            }
        }
    }
</script>

You need an <a :src="text">click me</a> tag. You should probably consider renaming "text" to "url" if it's always a URL — maxshuty
– maxshuty, Commented Feb 3, 2021 at 21:02

Will Freeman · Accepted Answer · 2021-02-03 22:28:18Z

1

It looks like you want to create a link with the URL displayed as its text. You can do the following:

<div v-show="isOpen" class="jwsingle__player__text__description">
  <a :href="text">{{ text }}</a>
</div>

The : in front of :href is important as it binds the prop value of text instead of the string "text".

answered Feb 3, 2021 at 22:28

Will Freeman

196 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Regex in vue js template

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related