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.