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

Question

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

where is the console? is it modified after the fact?

depperm
– depperm

2020-03-20 18:21:54 +00:00
Commented Mar 20, 2020 at 18:21 — depperm
– depperm, Commented Mar 20, 2020 at 18:21

Dan · Accepted Answer · 2021-06-13 11:59:44Z

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>

depperm · Accepted Answer · 2020-03-20 18:22:13Z

0

It might be caused by the fact that in the parent component you are assigning your variables to incorrectly named props :archive-name="archiveName" instead of :archiveName="archiveName".

edited Mar 20, 2020 at 18:22

depperm

10.8k4 gold badges46 silver badges68 bronze badges

answered Mar 20, 2020 at 18:21

Eggon

2,4262 gold badges27 silver badges47 bronze badges

1 Comment

depperm Over a year ago

this doesn't seem to be the case doc

Lucifer · Accepted Answer · 2024-02-14 07:41:28Z

I am writing this answer as the accepted answer did not work for me.

My object was empty but still was being evaluated as truthy.

Note: My object was an array (json like) so I have used Object.keys()>0 as a if conditional to check if the array is empty. I think its a better and a more reliable way to check if your array is empty. This solution would only work on arrays as per my knowledge

{
    "__v_isShallow": false,
    "__v_isRef": true,
    "_rawValue": {},
    "_value": {}
}

So, a better solution is to check v-if="Object.keys(archiveNote).length > 0" or

Answer

here is a snippet demonstrating the same :




const app = Vue.createApp({
    data() {
        return {
            archiveNote: ['Note 1', 'Note 2', 'Note 3'] // Example array
        };
    }
});

app.mount('#app');
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js Demo</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.8/vue.global.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- Using v-if with Object.keys(archiveNote) > 0 -->
        <div v-if="Object.keys(archiveNote).length > 0">
            Display something because archiveNote is not empty.
        </div>

        <!-- Using v-if=archiveNote.length -->
        <div v-if="archiveNote.length">
            Display something because archiveNote is not empty.
        </div>
        
    </div>

    <script src="app.js"></script>
</body>
</html>




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

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

1 Comment

Answer

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Answer

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related