computed property displays as plain text in vue-CodePudding

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>

CodePudding user response：

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

CodePudding user response：

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>