VueJS2: v-if with multiple expressions does not work

Question

I am trying to hide a div element using the v-if directive in an HTML element like so:

<template v-if="(selectedProducts != 'Static Graphic' || selectedProducts != 'Other Support')">
  <div><strong>Content 2 Here</strong></div>
</template>

But, this doesn't work.

What's the correct way to write this logic/expression? MY JSFIDDLE demo

Thank you,

So it seems that according to the VueJS docs, multiple expressions are not allowed in directives in VueJS2. Did I read that right? I should move this logic into the computed property? — redshift
– redshift, Commented Sep 14, 2017 at 14:34

Thierry · Accepted Answer · 2017-09-14 14:42:07Z

1

You can put an expression in v-if. The problem is with your expression: selectedProducts is an Array, you can't test selectedProducts != 'Static Graphic'

Try this:

v-if="(selectedProducts.indexOf('Static Graphic') < 0  && selectedProducts.indexOf('Other Support') < 0)">

jsfiddle: https://jsfiddle.net/thierry36t/x2kc55p0/1/

answered Sep 14, 2017 at 14:42

Thierry

5,2533 gold badges27 silver badges30 bronze badges

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

Comments

tony19 · Accepted Answer · 2022-07-15 02:24:40Z

0

VueJS has awesome documentation so You should take a look here first https://v2.vuejs.org/v2/guide/conditional.html

Here You can skip template tag and move v-if into the div like this:

<div v-if="selectedProducts != 'Static Graphic' || selectedProducts != 'Other Support'">
 Now you see me
</div>

Take a look here: https://jsfiddle.net/bqe05f2w/1/

Update for Your particular case:

<template v-if="selectedProducts.indexOf('Static Graphic') > 0 || selectedProducts.indexOf('Other Support') > 0">
  <div><strong>Content 2 Here</strong></div>
</template>

edited Jul 15, 2022 at 2:24

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Sep 14, 2017 at 14:37

monas

2044 silver badges8 bronze badges

Collectives™ on Stack Overflow

VueJS2: v-if with multiple expressions does not work

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related