Is it possible to display HTML attributes in Vue mustache?
{{ (data.status)? "<div>Active</div>" : "<div>InActive</div>"}}
You can use the v-if directive in your case.
<div v-if="data.status">Active</div>
<div v-else>Inctive</div>
You cannot add HTML within a mustache expression. It causes the expression to not be evaluated.
https://jsfiddle.net/0zaknb56/
What you can do is use the v-html directive
<div v-html="data.status ? `<div>Active</div>` : `<div>Inactive</div>`">
</div>
https://jsfiddle.net/7h6osyt9/
Related
I have an HTML server-side template that looks like this:
<div id="vue">
<button v-pre>{% trans "Save" %}</button>
</div>
The server-side templating language will replace {% trans "Save" %} with the translated string, with <, > and & escaped to <, > and & respectively. However, it won't escape the Vue delimiters. For this reason, to be safe, I've used v-pre directive in the element, as is recommended when mixing server-side templating with Vue. Here is the documentation for v-pre:
v-pre: Skip compilation for this element and all its children.
Some time later, I modify the code to include a v-if condition, like this:
<div id="vue">
<button v-if="condition" v-pre>{% trans "Save" %}</button>
</div>
It doesn't work. The problem is that the v-if directive has no effect, because of the v-pre directive.
What I'm looking for is something like the v-pre directive that will turn off compilation for all the element's children (including child text nodes), but won't turn off other directives on the same element. Is this possible?
One workaround is to use a child <template> element, like this:
<div id="vue">
<button v-if="condition">
<template v-pre>{% trans "Save" %}</template>
</button>
</div>
Let's say I have this html element
<div class="progress-bar w-90"></div>
and I want to replace 90 with an object from vue. I tried below but syntax
<div :class="progress-bar w-{{ progress.value }}"></div>
You cannot use {{ }} in attribute/props, better to use template literals as below.
<div :class="`progress-bar w-${progress.value}`"></div>
You can achieve text-binding in this way
<div :class="'progress-bar w-'+progress.value"></div>
How do i get v-hide to work. Below is my example.
All I'm trying to achieve is i want the above to hide if value.photo is empty.
<div v-for='value in listPlayers'>
<img v-hide='value.photo.length > 0' src='/wp-content/uploads/2018/10/dummy-copy.gif'>
</div>
You should use v-if or v-show directives and use the negation of your condition :
v-if='!(value.photo.length > 0)'
If you don't want to render the element it is better that you use v-if like this:
<div v-for='value in listPlayers'>
<img v-if='!value.photo.length' src='/wp-content/uploads/2018/10/dummy-copy.gif'>
</div>
You can use v-show also, but with v-show the content will be rendered but not displayed.
I am new to VueJS and I have a simple HTML markup where I iterate through some objects and render them in html like so:
<div v-for="item in some_counter">
<p v-if="item.some_param1 !== 'None'">
[[ item.some_param2 ]]
</p>
</div>
However, I notice that even when the condition evaluates to false, I see an extra HTML <div></div> markup. This seems very odd to me, coming from the Django world.
How do I avoid this extra markup?
The v-if applies to the element you place it on. So if you want to conditionally include the <div> you need to put the v-if on the <div> (or a parent element). It won't remove the <div> just because it is empty.
Technically you can have both v-for and v-if on the same element but it is generally discouraged as it can be confusing trying to understand which is applied first (see https://v2.vuejs.org/v2/guide/list.html#v-for-with-v-if). Instead you should include a wrapping <template> for the v-for:
<template v-for="item in some_counter">
<div v-if="item.some_param1 !== 'None'">
<p>
[[ item.some_param2 ]]
</p>
</div>
</template>
The <template> tag is special and won't add an extra element to the finished DOM.
An alternative approach would be to filter the list of items in a computed property and then iterate over the filtered list in your template.
I have the following HTML:
<div v-html="parse(message.message)">
<i v-if="message.messageTypeId === 2" class="SpecialIcon"></i>
</div>
For some reason the element <i v-if="message.messageTypeId === 2"></i> is not being added into the DOM because what I think is that when v-html is evaluated the innerHTML is being replaced.
Any clue on how to make that work?
Thanks
Try using curly braces to embed your generated message in place, rather than relying on the v-html property.
<div>{{parse(message.message)}}
<i v-if="message.messageTypeId === 2" class="SpecialIcon"></i>
</div>