0
167
ViewsHide Div based on value of props
I have imported props from my parent.vue. Now I want to hide my div based on the number in my Object.
If my props number is empty or 0 i want to hide this Div, if it is bigger or equal than 1 I want to show it.
Here is how my object looks like which I get from my methods:
my template:
<template>
<div class='row mb-5'> <!-- HIDE THIS COMPLETE DIV -->
<div class='col-12'>
</div>
</div>
</template>
my script:
data: function() {
var data = {
checkNumber: this.number,
}
console.log(data);
return data;
},
props: [
"number"
]
·
Juan Pablo Isaza
1 answers
Answer question0
You can use v-if or v-show:
Vue.component('Child', {
template: `
<div class='row mb-5' v-if="Number(number) > 0">
<div class='col-12'>
number > 0
</div>
</div>
`,
data() {
return {
checkNumber: this.number,
}
},
props: [
"number"
]
})
new Vue({
el: '#demo',
data() {
return {
numbers: 0,
}
},
})
Vue.config.productionTip = false
Vue.config.devtools = false<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<input type="number" v-model="numbers" />
<Child :number="numbers" />
</div>
·
Juan Pablo Isaza
Report
Answer question