Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vue v-if statement to check if variable is empty or null

I am trying to use a v-if statement to show some HTML only if the archiveNote variable is not empty/null.

<div v-if="archiveNote === null || archiveNote ===''" class="form-check ml-3" id="include-note-div">

Here is how it's instantiated

export default {
    name: "ConfirmReleaseFilesModal",
    props: {
        archiveName: String,
        archiveNote: String
    },

which is then passed in from this other Vue file

<confirm-release-files-modal
    v-if="showConfirmReleaseFilesModal"
    @cancel="closeModal"
    @confirmAndEmail="releaseAction"
    @confirmNoEmail="releaseAction"
    :archive-name="archiveName"
    :archive-note ="archiveNote"
>
</confirm-release-files-modal>

The block of HTML still shows when archiveNote is console.log out as empty

like image 294
d1596 Avatar asked Mar 20 '20 18:03

d1596


People also ask

How do I check if a string is null or empty in Vue?

If the string is not undefined or null and if you want to check for empty string in Javascript we can use the length property of the string prototype as shown below. Or you can directly check for the empty string with javascript Comparison operator “===” as shown below. Thank you for reading !

How do I check if an object is empty in Vue?

If you are a using core jquery and you need to check array or object is empty or not then you can do it easily. In vue js you can't do it very simple, but you can do it using v-if and array. length.

What does V-if do in Vue?

v-if. The directive v-if is used to conditionally render a block. The block will only be rendered if the directive's expression returns a truthy value.

How do you check if a variable is empty in JavaScript?

Say, if a string is empty var name = "" then console. log(! name) returns true . this function will return true if val is empty, null, undefined, false, the number 0 or NaN.


1 Answers

If you want to show the <div> only when it is truthy (not empty/null/etc.), you can simply do:

<div v-if="archiveNote">

This gives the same result as the double bang:

<div v-if="!!archiveNote">

Both of these expressions evaluate all 8 of JavaScript's falsy values to false:

  • false
  • null
  • undefined
  • 0
  • -0
  • NaN
  • ''
  • 0n (BigInt)

and everything else to true. So if your variable evaluates to anything but these it will be truthy, and the v-if will show.

Here's a demo of these and some truthy examples:

new Vue({
  el: "#app",
  data() {
    return {
      falsy: {
        'null': null,
        'undefined': undefined,
        '0': 0,
        '-0': -0,
        '\'\'': '',
        'NaN': NaN,
        'false': false,
        '0n': 0n
      },
      truthy: {
        '[]': [],
        '{}': {},
        '\'0\'': '0',
        '1': 1,
        '-1': -1,
        '\' \'': ' ',
        '\'false\'': 'false',
        '5': 5
      }
    }
  }
});
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}
#falsy, #truthy {
  display: inline-block;
  width: 49%;
}
.label {
  display: inline-block;
  width: 80px;
  text-align: right;
}
code {
  background: #dddddd;
  margin: 0 3px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div id="falsy">
    Falsy:
    <div v-for="(test, label) in falsy">
      <div class="label">{{ label }}</div>
      <code v-if="test">true</code>
      <code v-else>false</code>
    </div>
  </div>
  
  <div id="truthy">
    Truthy examples:
    <div v-for="(test, label) in truthy">
      <div class="label">{{ label }}</div>
      <code v-if="test">true</code>
      <code v-else>false</code>
    </div>
  </div>
</div>
like image 67
Dan Avatar answered Oct 06 '22 01:10

Dan