vuejs basic conditional rendering issue

Question

I simply just want to show the span if the name is found in the data. If its not found in the data, I want the span to hide. I am using simply v-if or v-else.It is currently displaying "my name is in the data". But it is not. I basically will have some names...and want the "my name is in the data" to only display if the name is indeed there.

new Vue({
  el: "#app",
  data: {
    FirstName:'Paul',
   
  },
  methods: {
    toggle: function(todo){
        todo.done = !todo.done
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">

 <span v-if="FirstName=='lu'||'John'||'Sue'">
  My Name is in the data
 </span><br>
 <span v-else>
   Not available
 </span>
</div>

Vavon · Accepted Answer · 2022-05-06 17:51:40Z

1

I think it's better to do your conditionals like this

new Vue({
  el: "#app",
  data: {
    FirstName:'Paul',
   
  },
  methods: {
    toggle: function(todo){
        todo.done = !todo.done
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">

 <span v-if="FirstName=='lu'|| FirstName=='John' || FirstName=='Sue'">
  My Name is in the data
 </span>
 <span v-else>
   Not available
 </span>
</div>

answered May 6, 2022 at 17:51

Vavon

264 bronze badges

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

Comments

Jeff Bowman · Accepted Answer · 2022-05-06 17:54:56Z

0

In Javascript, non-empty strings are regarded as true ("truthy") in boolean expressions, and equality is of a higher operator precedence than boolean OR (||). Therefore, as a boolean, your expression reads as though it were:

(FirstName=='lu') || true || true

The above expression is always true, so your element is always visible.

As in Vavon's answer, you'll need it to read:

FirstName=='lu'||FirstName=='John'||FirstName=='Sue'

or with spaces:

FirstName == 'lu' || FirstName == 'John' || FirstName == 'Sue'

answered May 6, 2022 at 17:54

Jeff Bowman

96.2k19 gold badges227 silver badges266 bronze badges

Comments

user459872 · Accepted Answer · 2022-05-06 17:59:06Z

0

You can also use Array.includes in your v-if condition to check whether FirstName is in any set of values.

<span v-if="['lu', 'John', 'Sue'].includes(FirstName)">
  My Name is in the data 
 </span>
 <span v-else>
   Not available
 </span>

answered May 6, 2022 at 17:59

user459872

25.9k4 gold badges51 silver badges74 bronze badges

Collectives™ on Stack Overflow

vuejs basic conditional rendering issue

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related