If the property is undefined, Vue JS will not display

Question

If the property is undefined, Vue JS will not display

I am facing an issue with the following markup in 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>

However, when this is rendered on the DOM, it looks like this:

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

I need a solution for the v-if condition to ensure that the html  tag is not outputted at all if the property is undefined or empty.

javascript vue.js vuejs2

Answer 1

Answer №1

There is a mistake in the first  tag you have used

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

Answer 2

There is a mistake in the first  tag you have used

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

Answer 3

Answer №2

Simply utilize this line of code:

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

UPDATE:

Evidence that it is effective:

https://jsfiddle.net/1j6kn9uo/

Answer 4

Simply utilize this line of code:

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

UPDATE:

Evidence that it is effective:

https://jsfiddle.net/1j6kn9uo/

Answer 5

Answer №3

The issue is quite straightforward, there's a missing closing tag for the p element in this line:

<p>{{ location.address1 }}<p>

. This causes the browser to close the p tag for location.address1 and open an empty  right after it. As a result, Vue renders  because location.address2 is not defined.

Now that we've identified the problem, another optimization we can make is here:

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

. What does this mean? Well, there's no need to explicitly compare location.address2 with undefined. The v-if directive will evaluate to true as long as location.address2 is not null or undefined.

Take a look at 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>

Answer 6

The issue is quite straightforward, there's a missing closing tag for the p element in this line:

<p>{{ location.address1 }}<p>

. This causes the browser to close the p tag for location.address1 and open an empty  right after it. As a result, Vue renders  because location.address2 is not defined.

Now that we've identified the problem, another optimization we can make is here:

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

. What does this mean? Well, there's no need to explicitly compare location.address2 with undefined. The v-if directive will evaluate to true as long as location.address2 is not null or undefined.

Take a look at 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>

Answer 7

Answer №4

consider altering

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

to

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

Answer 8

consider altering

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

to

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

Answer 9

Answer №5

While the solutions mentioned in other posts should generally work, there is another alternative that involves utilizing double logical NOT consecutively to explicitly coerce any value into a corresponding boolean primitive.

!!location.address2 // Guarantees 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>

Answer 10

While the solutions mentioned in other posts should generally work, there is another alternative that involves utilizing double logical NOT consecutively to explicitly coerce any value into a corresponding boolean primitive.

!!location.address2 // Guarantees 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>

If the property is undefined, Vue JS will not display <p>

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Demo

Similar questions

Start progress bars on several divs that share a common class

Method for displaying or concealing list items with an onClick event in React without relying on JQUERY

I'm currently experiencing a challenge with a project I'm tackling that specifically deals with chart.js

End event in NodeJS response does not activate

What happens when `somevar` is `undefined` and resolved after `$q.all([somevar]).then(function(data)){};` is executed?

Mapping through multiple items in a loop using Javascript

Vue has detected that the property or method "index" is being referenced in the render function, but it is not defined on the instance

My stored variable in the php session is not being recalled properly

Choose only link-based criteria

Using an image instead of a checkbox when it is selected (Angular 4/Ionic 3)

What could be the reason behind the child component updating without triggering a re-render in Reactjs?

What is the best way to eliminate mouse click release events?

How can you set an input field to be initially read-only and then allow editing upon clicking a button using Vue.js?

Is it possible to include a submenu within a md-tooltip?

Looping through dates in a POST request using JavaScript/GAS - What's the best approach?

Creating a custom login directive in Angular 2 and utilizing location.createComponent for dynamic

Identify differences between two arrays of varying sizes and filter out any identical elements

Using Node.js for a game loop provides a more accurate alternative to setInterval

Is there a possibility of Typescript expressions `A` existing where the concept of truthiness is not the same as when applying `!!A`?

Parameters in functions are received by value