computed property displays as plain text in vue

Question

How can I display the title with spans as HTML not plain text.

Code:

spanTitle() {
    return this.title.replace(/([A-Za-z0-9'<>/]+)/g, '<span>$1</span>');
}

{{ spanTitle }}

this.title = "Upcomming Events"

spanTitle currently displays as:

<span>Upcomming</span> <span>Events</span>

Please share more code and details about the use case – Boussadjra Brahim Jun 20 '22 at 09:07 — Boussadjra Brahim, Jun 20 '22 at 09:07
This is what v-html is for – Estus Flask Jun 20 '22 at 09:09 — Estus Flask, Jun 20 '22 at 09:09

score 1 · Answer 1 · answered Jun 20 '22 at 09:32

1

To fix the issue, I used the v-html directive

answered Jun 20 '22 at 09:32

BennKingy

score 1 · Answer 2 · answered Jun 20 '22 at 10:12

1

you can do using ,

but a better way to do is

spanTitle() {
    return this.title.replace(/([A-Za-z0-9'<>/]+)/g, $1);
}

and use span in template like

<span> {{ spanTitle  }} </span>

answered Jun 20 '22 at 10:12

meet vaghsiya

2 Answers2