Home > Net >  vue js 2 -- using v-html with message data
vue js 2 -- using v-html with message data

Time:12-02

I am using vue js 2, my SDK is IntelliJ:

I am trying to import very simple html into a vue.js file.

The purpose is for attribute since Vue doesn't directly seem to support this.

In the markup, I have:

div v-html="message1"></div>

In the data, I have a very simple message1:

message1:   '<title>My webpage -- from message1 </title>',

Interestingly, I can display message1 with "moustache" syntax, but it just shows the title tags.

The message1 used by v-html compiles, but it doesn't appear on the page as rendered.

Is the premise that vue doesn't directly support correct? I've seen complex work-arounds for this, but is there a simple HTML-like way of getting this tag there for simple static text, please? The goal of this is for accessibility purposes.

There is a way to display it on the web-page, see accepted answer. Also, please read all comments to this answer carefully.

REQUIREMENTS CLARIFICATION: Per comment to this question: The actual goal is to get it to display in the "tab" part of the page, where it should display. I can display it on the page, but not in the "tab" part of the page [above the URL on most browsers]. I made this clarification after accepting the answer on how to display it.

For changing the title in the tab of the web-page (see above), the following URL has a very elegant method using js mixins. This does work for Vue-js 2.0, so I recommend it: https://medium.com/@Taha_Shashtari/the-easy-way-to-change-page-title-in-vue-6caf05006863

CodePudding user response:

As you can see here, many browsers have a default css style for the title tag.

In Chrome there is:

title {
  display: none;
}

You should use another tag or just override the default style.

  • Related