I'm struggling to make a table with component / HTML example pairs.
Here's the example of what I did (it doesn't work):
<td>
<vm-three-state-checkbox-filter
name="three-checkbox"
></vm-three-state-checkbox-filter>
</td>
<td v-pre>
<pre>
<vm-three-state-checkbox-filter
name="three-checkbox"
></vm-three-state-checkbox-filter>
</pre>
</td>
And here is the result:
One the left you can see the rendered component, on the right i expect to see raw html instead of nothingness I'm presented with.
I can specify the escaped HTML as string in data and that would work (vue escapes strings by default), but I'd prefer to do it in template.
Thanks for help in advance.
The v-pre directive keeps Vue from compiling anything inside that element.
So your <vm-three-state-checkbox-filter> element stays in the browser as it is in the template, and as that is not a valid HTML element, the browser displays: nothing.
v-pre does not HTML-escape anything for you. It only keeps Vue from compiling the Vue-template-code stuff - components, directives, mustache {{}} tags.
You could probably write a small custom directive (with the terminal: true option enabled) that would convert the HTML elements inside into an escaped string, but that's not something I can throw together on the spot.
HTML code not escaping with tag.
Related
I do have problems understand the tag </main>.
The project im looking at only has one </main> closing tag at the end, it has no opening tag of <main> which confuses me in the first place. It also has main {} in CSS. In order to try to understand what it does, I have played around with it a little.
As I comment out the </main> in html, absolutely nothing changes, which I understand if it has only informativ character, but the part where I get confused is, what is the main {....} in the CSS referring to, since when I comment this out, it will mess up the styling of the hole page.
edit: Since it seems to be unclear what my problem is: The problem is, that main {.....} in CSS does (!) influence the styling of the site, even without an opening <main> tag in html, and even without ANY <main> tag in html (for example if I remove the </main> tag in html.
How can a main {....} in CSS have influence on the styling, if there isn t even any <main> tag in the html whatsoever?
main{...} in css reffers to the styling of the main tag.
More about the element css selector
https://www.w3schools.com/cssref/sel_element.asp
You can learn more about the main tag here
https://www.w3schools.com/TAgs/tag_main.asp
And more about css selectors here
https://www.w3schools.com/cssref/css_selectors.asp
Also note that the main tag must have opening amd closing tag
You have to either add a tag, or remove main{...}.
The tag specifies the main content of a document.
The content inside the element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.
Note: There must not be more than one element in a document. The element must NOT be a descendant of an , , , , or element.
just refers to the main content of the page, it does nothing. Main{...} is styling in the CSS page.
Is it possible to parse string with components inside to template in vue.js? Example of string:
"Some text, some <b>bold text</b>, and inserted image from this
component <vue-simple-image :src='images/my_image_name.png' />, another text and html tags."
It looks like I need store such strings to database to use them later for recreating user input from vue-wysiwyg editor.
In the strict sense you asked the question, I do not think this is possible. There is a v-html directive, that can render html for you but not components. This is also considered an anti-pattern, as the vue guide states:
Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS attacks. Only use v-html on trusted content and never on user-provided content.
You could look into dynamic components in order to render vue components based on user input.
You could parse the wysiwyg user input, split the string on recognized vue-component tags (so you have an array of pieces of elements with sequences of regular html and elements that are single vue-components), and then use a template with v-for looping to render this. (non-working pseudocode) example:
<div id="renderedWysiwygInput">
<div v-for="elem in splitInput">
<component v-if="stringIsVueComponent(element)" v-bind:is="element"></component>
<div v-else v-html="element"></div>
</div>
</div>
You'll have to work this example out a bit more though to account for the possibility of input inside the vue components themselves, for example if you are filling slots. I would try to limit what kind of input you are going to support to keep it manageable.
No, this is not possible, because Vue component is not just an html piece, it is a js class. So you need to register it properly and so on...
I am trying to inject vue tags dynamically using v-html. However, it does not render as expected. I have attached a link to a jsFiddle example, where I try to add a v-icon via v-html. Instead of the tag being correctly injected, it strips the tags away and only renders the content inbetween.
Example:
The following code works fine, but it is not dynamic. What If I want other html tag(s) beside v-icon?
<table>
<tr>
<td><v-icon>mdi-car-side</v-icon></td>
The following code does not work, but is dynamic. It just places the icon name on the screen, and strips away the tags.
<table>
<tr>
<td v-html="dynamicData"></td>
https://jsfiddle.net/cgbwe31t/1/
I have read the blurb here https://v2.vuejs.org/v2/guide/syntax.html#Raw-HTML about 'Note that you cannot use v-html to compose template partials, because Vue is not a string-based templating engine', but I'm not sure that applies in this case.
In case anyone was wondering, the best solution is to use v-slot to insert any html you want.
So basically, when using components - the app root passed to the Vue instance gets replaced by whatever HTML is in the component. Is there a way to disable this and just nest the stuff Vue renders inside the app root instead?
for example - if index.html has a wrapper of
<div id="myVueApp"></div>
and I set el: "#myVueApp" on the Vue instance, the whole node will get removed and replaced by whatever I have in my template resulting in
<div id="myComponent">...</div>
Is there a way to make it into
<div id="myVueApp">
<div id="myComponent">...</div>
</div>
Should work. From what I understand, you want to have multiple parts of your Vue app to be splitted up in the rendered HTML output as well, more specifically into multiple divs.
I think this should work if you use multiple Vue instances.
Set up a structure in your HTML file and give them appropriate id's.
Then, create the Vue instances you want and assign each of them to their specific div using el.
However, I can't tell you if this is a good idea and follows the best practice..
Hope this helps!
According to the VueJS docs, <span v-text="msg"></span> is the same as <span>{{msg}}</span>. Out of really nothing other than habit I always use the "mustache" syntax to bind data. In what situations would one choose to use v-text instead, and why?
One reason you might want to use v-text is if you need to pre-render some markup on the server, but also have it bind client-side. For example:
<span v-text="msg">This message was pre-rendered from the server.</span>
That way the {{msg}} syntax doesn't get in the way of the content.
This directive updates a html-node with innerContent. Html will not be rendered like with v-html. You can use v-text to have your template look other but internally, {{ Mustache }} interpolations are also compiled as a v-text direcitve.
v-text, or "Directive Syntax" interpolates a property value as an HTML element's text.
If you need to bind to a part of the element only you need to use Semantic syntax ({{mustache}}).
For example, if you had <h4>Hi, this is the text : {{text}}</h4> then, during the update only what's inside {{text}} would be replaced. However, if you use v-text it will replace the whole content of the element.
Just a heads up, for situations where you mistakenly use v-text when your variable contains mark up, it will be rendered as raw html in the browser, just a gotcha to watch out for.