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
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 !
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.
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.
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.
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
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With