How do you display raw code in vue?
For example I have a <Button />. Putting that in my template renders the component. What do i do if i just want to render the text as you see it <Button />? I tried double mustache ({{ <Button /> }}) and that still renders the component. Do i have to install a markdown library?
Simplest solution is to replace < and > with < and >
<template>
<div>
<pre><Button /></pre>
</div>
</template>
Another solution is to create a string in your data property and render it in your template, since it will be rendered as plain text, as per Vue's documentation:
The double mustaches interprets the data as plain text, not HTML. In
order to output real HTML, you will need to use the v-html directive
So, by doing the opposite, because you want to render the HTML as plain text, the following example will work:
<template>
<div>
{{ htmlRenderedAsText }}
</div>
</template>
<script>
export default {
data() {
return {
htmlRenderedAsText: "<Button />"
}
}
}
</script>
I'm new to Vue and I'm looking at an existing code that makes me question, where do the tags <u-col> and <u-row> come from?
My very little understanding of Vue so far is that you can create custom components and then use those components like html tags in the template. But my understanding is that if the component is to be used then it must be exported from where it is created and then imported at where it is being used.
Below is a part of the code that I'm not sure if <u-col> or <u-row> are custom made tags or if they're simply default vue tags? I don't think they're custom tags because I don't see any imports and I haven't found anything in the source code that tells me they are custom tags. But I don't think they are default vue tags either because I haven't seen them from my google searches. The closest I've come to is the <b-col> tag but I know that is from bootstrap.
<template>
<u-row class="mb-4 flex-nowrap">
<u-col class="text-sm text-700 text-right col-2 mr-4">
<span v-if="required" class="text-warning">*</span>{{label}}
</u-col>
<u-col>
<slot />
</u-col>
</u-row>
</template>
<script>
export default {
props: {
label: {
type: String
}
}
</script>
<style>
</style>
Any help is appreciated.
I am facing a very interesting problem. I am returning some html from server as json. My return html string look like this
str2: " <span class="card_top_com_span link_color" ><router-link to="/profile/sadek3/about">numan sir</router-link> </span></span>, <span class="card_top_com_span link_color" ><router-link to="/profile/sadek3/about">sadek mia</router-link> </span> and 4 of your firiends commented on this post"
This is returned from server. Now I want to add some spa link.
It can be nuxt link, #click event for routing or a </router-link>
I am using v-html in my front end to out put html. It does output correctly.
Is there anyways of doing this?
Thank you.
As said in the comments, it's way better to respond from your server with structured JSON data. However, you can make it work, but you need to use a <component></component>. Just using v-html won't work if you have router-link:
<div id="app">
<component :is="{template: theString}"></component>
</div>
new Vue({
el: '#app',
data: {
theString: '<h3>Something Cool</h3>'
}
})
https://jsfiddle.net/to8smxfb/
PS: You also need to make sure that theString only contains one root element. You can wrap your string into <div></div> for example.
In other words one might have an html at some point which looks like this:
<bloglink blogposturl="http://a.link" blogposttitle="my title" ></bloglink>
And the template attribute like so:
...
template: '<h3><i><a style="text-decoration: underline; cursor: pointer;" v-on:click="load_blog_page(blogposturl)">{{blogposttitle}}</a></i></h3>',
...
But what if one wanted to express instead
<bloglink blogposturl="http://a.link" blogposttitle="my title" >
<p>.....complex html in here.... which is not dynamic....</p>
</bloglink>
One would want to keep this html when loading the webpage instead of being completely replaced.
One way would be to take this complex html and insert it as a parameter being careful with escaping properly etc. but this does not seem very elegant.
What is the recommended way?
Vue component slot.
for example:
ParentComponent:
<template>
<div>
<slot></slot>
</div>
</template>
SomeOtherComponent:
<template>
<div>
<parent>
<p>whatever</p>
</parent>
</div>
</template>
I have the need to insert a comment inside a vue.js file for future references, but I don't find how you do this in the docs.
I have tried //, /**/, {{-- --}}, and {# #}, but none of them seem to work.
I am using Laravel's blade. So this is the sample_file.vue:
<template>
<div class="media">
<like-button :post="post" v-if="post.likedByCurrentUser === false && "></like-button> {{--I want to comment this but I get an error from the gulp watch: post.canBeLikedByCurrentUser === true--}}
<div class="media-left">
<a href="#">
<img class="media-object" v-bind:src="post.user.avatar" v-bind:title="post.user.name + ' image from Gravatar'">
</a>
</div>
<div class="media-body">
<strong>{{ post.user.name }}</strong>
<p>{{post.body}}</p>
<p>{{post.likeCount}} {{ pluralize('like', post.likeCount) }}</p>
</div>
</div>
</template>
Does anyone know how to insert a comment and / or how to comment pieces of code?
You'd want to use standard HTML comments in the <template> tag in your situation. They'll be stripped from the output as well which is nice.
<!-- Comment -->
As Bill Criswell said we can use HTML comment syntax.
<!-- Comment -->
But, It will work outside the template tag too,
comment.vue
<!-- Testing comments, this will work too. -->
<template>
<!-- This will work too -->
<div>
<!-- Html Comments -->
Hello There!
</div>
</template>
<style><style>
<!-- Commenting here -->
<script>
// Commenting only 1 line
/**
* Commenting multiple lines
* Commenting multiple lines
*/
</script>
I have just tested this:
<template>
{{ /* this is a comment */ }}
<h1>Hello world</h1>
</template>
I noticed that you can't comment when you are inside a tag:
<!-- make sure it is outside a tag -->
<autocomplete
<!-- you can't place the comment out in here -->
>
</autocomplete>
If it is useful for your projects, you can put plain text above the template with no adornment. It is completely ignored when you render your component.
This is some documentation about this component
- some
- info
<template></template>
<script></script>
<style></style>
Vue Styleguidist contains best practices and shows examples of how to comment your components.
https://vue-styleguidist.github.io/docs/Documenting.html#code-comments
But in General...
In the template or HTML section use HTML comments
<!-- Comment -->
In script section use Javascript comments
// Comment
/* Comment */
In style section use CSS comments
/* comment */
The following tip is not so much about commenting (as in documenting) code per se, but rather about allowing you to temporarily skip chunks of code during development.
When comments require opening and closing tags, the way that the parser matches them can be inconvenient. For instance the following
<!-- I want to comment this <!-- this --> and that -->
will output and that -->. Similarly /* this will be commented /* and so will this */ but not this */.
My solution is to use v-if="false" to specify which blocks I want to (temporarily) skip.
<template>
<div>
Hello
<div v-if="false">
Vue will not process whatever's in here.
</div>
World!
</div>
</template>
Note that this should not be used in replacement of proper comments to document your code. It's just a convenient way to have more control over blocks that you want to skip during the development.
In Vue file / .vue use
/*-- comment in Vue file */
Depending on specific desired behavior, here are things that works to add comments in the template section:
<template>
<!-- comment incorporated in the rendered output. -->
<aside v-if="false">Some comment that won’t be in the output result.</aside>
</template>
Of course for the latter there is no requirement to use aside tag, and any false evaluated value can do the trick. So <i v-if="0">Some comment</i> will work just as well.
Admittedly, this is a bit convoluted, but Vue doesn’t seems to provide more straight forward options.
I'm noob in Vue.js, but // should work because the code is javascript anyway.
Looking in the docs I find this example. If you look the first 2 lines of javascript you will see comments with //.
example in javascript linked file:
// Full spec-compliant TodoMVC with localStorage persistence
// and hash-based routing in ~120 effective lines of JavaScript.
...