CODEWITHSUNDEEP
javascripthtmlvue.jsvuejs2
Florian Haberfellner
Florian Haberfellner

Reputation: 17

Vue: V-if with condition

in my vue application I have following code:

<div v-if="partner == true && kids == false" class="row">
   <input type="text" id="testInput">
</div>

Now when I want to try out this code snippet it does not render the input. I am pretty sure it should because the variables have the right value at this moment.

I also tried this but this does not work either:

<div v-if="partner && !kids" class="row">
   <input type="text" id="testInput">
<div>

Is the condition wrong or what is the problem with this code?

Upvotes: 1

Views: 1242

Answers (1)

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23500

Your code is fine:

new Vue({
  el: "#demo",
  data() {
    return {
      partner: true,
      kids: false
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div v-if="partner && !kids" class="row">
   <input type="text" id="testInput">
  </div>
</div>

Upvotes: 3

Related Questions