CODEWITHSUNDEEP
javascripthtmlvue.jsvuejs2
ApplePie
ApplePie

Reputation: 1185

v-if with two conditions

I have the following code where v-if is always showing true even when doc.acceptance_letter = ''

<a 
  target="_blank"
  class="has-text-link"
  v-if="doc.acceptance_letter!=null || doc.acceptance_letter!= '' "
  :href="doc.acceptance_letter"  
>
  view
</a>

I want hide this anchor tag when doc.acceptance_letter is null or empty. Could anyone advise what I did wrong?

Upvotes: 1

Views: 179

Answers (3)

iagowp
iagowp

Reputation: 2494

Your code will always show, because it will always be different from null or '' (a variable can't have two values simultaneously). As suggested on comments, you can just check v-if="doc.acceptance_letter that will hide it in any falsy value, or do a v-if="doc.acceptance_letter != null && doc.acceptance_letter != ''

<a 
  target="_blank"
  class="has-text-link"
  v-if="doc.acceptance_letter
  :href="doc.acceptance_letter"  
>
  view
</a>

Upvotes: 2

anasmorahhib
anasmorahhib

Reputation: 827

you have to use && instead of ||, to display the tag whendoc.acceptance_letter is not null and not empty.

<a 
  target="_blank"
  class="has-text-link"
  v-if="doc.acceptance_letter!=null && doc.acceptance_letter!= '' "
  :href="doc.acceptance_letter">
  view
</a>

Upvotes: 1

Henrique Oliveira
Henrique Oliveira

Reputation: 77

Missing a '='

v-if="doc.acceptance_letter!== null || doc.acceptance_letter!== '' "

Upvotes: -2

Related Questions