Vue: V-if with condition

June 28, 2022

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?

>Solution :

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>