Here is my code:
JavaScript
let Names = [
{
Name: "Josh"
FullName: ""
},
{
Name: "Jonathan"
FullName: null
},
{
Name: "James"
FullName: "James Johnson"
}
];
Index.Vue
<ul>
<li
v-for="item in Names"
v-if=" item.FullName != null || item.FullName != '' "
>
{{FullName}}
</li>
</ul>
This v-if=" item.FullName != null || item.FullName != '' "
does not work, Why? How can I put two condition inside a v-if
?
If v-if == true and v-show changes from true to false , the leave transition occurs as expected. If v-show== true and v-if changes from true to false , the element is immediately removed, no transition occurs. My use case for this is using both v-if and v-show around media ( img , video ).
v-if. The directive v-if is used to conditionally render a block. The block will only be rendered if the directive's expression returns a truthy value.
v-else-if directive is a Vue. js directive used to toggle the display CSS property of an element depending on a condition when the if condition is not satisfied. First, we will create a div element with id as app and let's apply the v-else-if directive to an element with data.
The key difference is that v-if conditionally renders elements and v-show **conditionally displays **elements. This means that v-if will actually destroy and recreate elements when the conditional is toggled. Meanwhile, v-show will always keep the element in the DOM and will only toggle its display by changing its CSS.
Maybe it's the way you are treating empty strings as false-ly values and ||
is saying: show fullname if any of the two (left/right) expressions are true, which is not what you want I think.
Try this instead:
<li v-for="item in Names" v-if="item.FullName !== null && item.FullName !== ''">
Also, judging from your code, {{ FullName }}
should be {{ item.FullName }}
Samayo's answer is right, and maybe this question a little old, but there are some issues:
First, please avoid v-for with v-if in the same element! (source: https://v2.vuejs.org/v2/style-guide/#Avoid-v-if-with-v-for-essential)
And second, if you want to use v-if with || operator, just use a computed, or simple method.
Finally, I think its the better way if you use camelCase, not the PascalCase for the variants or for object's keys.
<li v-if="fullNameIsExist(item)">
<span>{{ item.fullName }}
And if you use a method:
methods: {
fullNameIsExist (item) {
if (![null, ''].includes(item.fullName)) return true
}
}
The best way is using computed stuff
computed: {
condition() {
this.FullName;
return this.FullName !== null && this.FullName !== '';
}
}
and is it as condition
<li v-for="item in Names" v-if="condition>
and instead of {{ FullName }}
you should use {{ item.FullName }}
You were almost right with condition, but error was because of {{ FullName }}
that's why you should write {{ item.FullName }}
and because of ||
instead you better might use &&
Also you can do the stuff like this:
<li v-for="item in Names" v-if="item.FullName !== null && item.FullName !== ''>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With