How can I use multiple condition in v-if in VueJS? How can I use multiple condition in v-if in VueJS? vue.js vue.js

How can I use multiple condition in v-if in VueJS?


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://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  }}


You can create a computed property that evaluates all of the conditionals then have a single v-if for your computed property. It will make your template cleaner and the computed property will be self documenting.