I have this markup on my template:

<div class="locButton" v-for="location in locResult.slice(0, 4)">
  <h5>{{ location.legal_name }}</h5>
  <p>{{ location.address1 }}<p>
  <p v-if="location.address2 !== undefined">{{ location.address2 }}</p>
  <p>{{ location.pri_phone }}</p>
</div>

But as result the element still gets printed like this on the DOM:

<div class="locButton">
   <h5>Name</h5> 
   <p>Address1</p>
   <p></p><!----> 
   <p>Phone</p>
</div>

What should I do on the v-if in order to not output the html <p> tag at all if that property is undefined or empty?

I have this markup on my template:

<div class="locButton" v-for="location in locResult.slice(0, 4)">
  <h5>{{ location.legal_name }}</h5>
  <p>{{ location.address1 }}<p>
  <p v-if="location.address2 !== undefined">{{ location.address2 }}</p>
  <p>{{ location.pri_phone }}</p>
</div>

But as result the element still gets printed like this on the DOM:

<div class="locButton">
   <h5>Name</h5> 
   <p>Address1</p>
   <p></p><!----> 
   <p>Phone</p>
</div>

What should I do on the v-if in order to not output the html <p> tag at all if that property is undefined or empty?

• javascript
• vue.js
• vuejs2

• have you tried <p v-if="location.address2">? – Laurens Commented Jan 23, 2019 at 22:43
• Hi @Laurens yes I did. It outputs the same thing. – Jaypee Commented Jan 23, 2019 at 22:45
• 1 I tested it and it doesn't print the <p> doing it like that... – Laurens Commented Jan 23, 2019 at 22:48
• 2 Are you sure that location.address2 is really undefined? Could it be, for example, a string with spaces, " "? I'd take a look in the developer tools to see what's actually in that property. – Stephen Thomas Commented Jan 23, 2019 at 23:14

5 Answers 5

You have a typo on your first <p></p> tag

<div class="locButton" v-for="location in locResult.slice(0, 4)">
  <h5>{{ location.legal_name }}</h5>
  <p>{{ location.address1 }}<p> <-- THIS NEED TO BE </p>
  <p v-if="location.address2 !== undefined">{{ location.address2 }}</p>
  <p>{{ location.pri_phone }}</p>
</div>

Just use:

<p v-if="location.address2">{{ location.address2 }}</p>

EDIT:

proof that it works:

https://jsfiddle.net/ok2un1qj/

The problem is very simple, you didn't close the p tag in this line: <p>{{ location.address1 }}<p> therefore the browser closes the p tag of location.address1 and opens an empty <p></p> after it. Then Vue renders <!----> because location.address2 is not defined.

Now that we found the problem, another optimization that we can implement is here: <p v-if="location.address2 !== undefined">. What you mean Teo? Well, we don't need to compare location.address2 with undefined. v-if will return true if location.address2 is different of null or undefiend.

Check the snippet below:

var app = new Vue({
  el: '#app',
  data: {
    location: {
      legal_name: 'Name',
      address1: 'Address1',
      pri_phone: 'Phone',
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h5>{{ location.legal_name }}</h5>
  <p>{{ location.address1 }}</p>
  <p v-if="location.address2">{{ location.address2 }}</p>
  <p>{{ location.pri_phone }}</p>
</div>

try changing

<p v-if="location.address2 !== undefined">{{ location.address2 }}</p>

to

<p v-if="location.address2">{{ location.address2 }}</p>

Solutions proposed by the other posts should invariably work, but another option is to use double logical NOT in series to explicitly force the conversion of any value to the corresponding boolean primitive.

!!location.address2 // Enforces boolean value -> True if it contains a value, false otherwise

Demo

new Vue({
  el: '#app',

  data() {
    return {
      location: {
        address1: 'Some address',
        address2: undefined
      }
    }
  },

  methods: {
    addAddress2() {
      this.location.address2 = 'Address 2';
    }
  }
})

#app>p {
  background-color: lavender;
  padding: 3px;
  margin: 5px;
}

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

<div id="app">
  <p>{{ location.address1 }}</p>
  <p v-if="!!location.address2">{{ location.address2 }}</p>

  <button @click="addAddress2">Add address 2</button>
</div>