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.
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>
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/
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 try this code:
<h1 v-if="2 === 1">Yes</h1>
<h1 v-else>No</h1>
but not work and show both of them tags <h1>
How to use v-if and v-else on vue.js?
If you don't need to remove the element from the DOM and the condition is simply to toggle some text - you could just use a ternary operator. See below
<h1 v-text="2 === 1 ? 'Yes' : 'No'" />
I would like to get a DIV based on two conditions in children DIVs.
//div//[child::div[text()="Administrator"] and //child::div[text='No card']]
But and condition appears to be working on properties of a single element.
Kindly advise how to achieve something like above, using either Xpath or CSSSelector
HTML:
<div>
<div class="src-containers-Quo-SimpleCard-components-styles-index__carHolderRow-" style="transition: s;">
<h4 class="-shared-react-components1Lsp1">Mr.</h4>
<div class="src-containers-Quo-SimpleCard-components-styles-index__carDetails--3xMqU">
<div class="src-containers-Quo-SimpleCard-components-1bGot">bla</div>
<div class="src-containers-Quo-SimpleCard-components--1bGot">Administrator</div>
<div><button class="src-containers-Quo-simpleCard-" type="button">Edit</button><button class="src-containers-Quo-SimpleCard-" type="button">Delete</button></div>
</div>
</div>
</div>
Many thanks
Basically if you want to select div by text values of two child div elements, you can do
//div[div="Administrator" and div="No card"]
Let me know (update your question) if you faced with another issue
P.S. Note that //div[//child::div[text='No card']] means something like return FIRST div if there is a div with text 'No card' somewhere in DOM, but not what you expect