How to replace some text with URL in vue?

Question

I want to replace some text from the string with link. I dont know how can I display it. SO far below code displays string with href link.

<span class="text">{{ $t(myText) }}</span>

    myText() {
        var text = "You can click text.";

        var href = "<a href='https://www.google.com'>Click Here</a>";

        var replaced = text.replace("click", href);

        return replaced;
    },

When you're using the handlebars syntax, the content will be inserted as plain text. You might want to use v-html instead, i.e. v-html="$t(myText)" — Terry
– Terry, Commented Jun 24, 2021 at 13:47

tony19 · Accepted Answer · 2022-07-16 01:42:43Z

2

To elaborate on my comment: the handlebars/moustache syntax is used to insert plain text into your template. That means that any string that contains HTML will be inserted as-is without parsing it as DOM.

In order to insert HTML into your template, you will need to use the v-html directive, i.e.:

<span class="text" v-html="$t(myText)"></span>

However, note that this presents a security risk if you're allowing users to insert their own content into the element.

edited Jul 16, 2022 at 1:42

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Jun 24, 2021 at 13:59

Terry

66.7k16 gold badges107 silver badges127 bronze badges

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

2 Comments

S S Over a year ago

How can i open in new tab ?

Terry Over a year ago

target="_blank"

Collectives™ on Stack Overflow

How to replace some text with URL in vue?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related