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

Question

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?

You should consider a computed property for this, by the way. — ceejayoz
– ceejayoz, Commented Nov 27, 2017 at 16:21
@ceejayoz That was my first thought, but it's actually inside a v-for so you couldn't really use a computed, but you could use a method. — craig_h
– craig_h, Commented Nov 27, 2017 at 16:25
Should i use computed or methods to this? I just want to not show li if FullName is '' (empty string) or null . Just that =x — Johnson
– Johnson, Commented Nov 27, 2017 at 16:26
in javascript any empty,null or undefined values are falsy.. So, !! double negates and returns an actual boolean value representing if they are any of those falsy values or not. — Mat J
– Mat J, Commented Nov 27, 2017 at 16:30

samayo · Accepted Answer · 2021-06-07 20:20:07Z

65

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

edited Jun 7, 2021 at 20:20

answered Nov 27, 2017 at 16:20

samayo

16.5k13 gold badges95 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Johnson Over a year ago

I have to use the operator ||, i tried to add one more =, but did not work :(

jedi Over a year ago

though the answer is right, it is a bad practice to use v-for and v-if on the same element. refer to Kamocsai Kamo András answer

Serafim Over a year ago

@jedi rigth. this is stated in the documentation - vuejs.org/v2/style-guide/…

MCCCS Over a year ago

Is it just my eyes or is there an odd number of unmatched " in the answer above?

samayo Over a year ago

@MCCCS definitely not your eyes :)

tony19 · Accepted Answer · 2022-07-15 05:02:23Z

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

Mr CaT · Accepted Answer · 2018-09-08 16:09:47Z

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 !== ''>

You should not use v-for and v-if at the same time: vuejs.org/v2/guide/conditional.html#v-if-with-v-for

tony19 · Accepted Answer · 2022-07-16 02:01:38Z

2

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.

edited Jul 16, 2022 at 2:01

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Nov 28, 2017 at 0:10

Sean

5371 gold badge6 silver badges16 bronze badges

Comments

WS Chan · Accepted Answer · 2019-08-17 15:45:57Z

0

Simple and easy.

<li v-for="item in Names" v-if="!!item.FullName>

In Javascript, !!0 will return false, !!1 will return true, !!"" will return false, !!"a" will return trueand !!null will return false

edited Aug 17, 2019 at 15:45

answered Aug 17, 2019 at 15:34

WS Chan

92 bronze badges

1 Comment

the digitalmouse Over a year ago

don't use v-for and v-if together in Vue2. see documentation link in above answer.

Collectives™ on Stack Overflow

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

5 Answers 5

5 Comments

Comments

1 Comment

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

Comments

1 Comment

Comments

1 Comment

Linked

Related