Menu
I am trying to toggle the visibility of a container div using Vuejs I have tried two methods as per below but neither have any affect on visibility of the container. Method 1:
<body>
<div class="checkbox" id = "selector">
<label><input type="checkbox" v-model="checked">Options</label>
</div>
<div class="container" id="app-container" v-if="checked">
<p>Text is visible</p>
</div>
<script src="path_to_/vue.js"></script>
<script>
var app = new Vue({
el: '#selector',
data: {
"checked": false
}
})
</script>
</body>
I know Vue.js loads OK, ticking the checkbox has no effect on text visibility.
Method 2:
<body>
<div class="checkbox" id = "selector">
<label><input type="checkbox" v-on:click="seen = !seen">Options</label>
</div>
<div class="container" id="app-container" v-if="seen">
<p>Text is visible</p>
</div>
<script src="path_to_/vue.js"></script>
<script>
var app = new Vue({
el: '#selector',
data: {
"seen": false
}
})
</script>
</body>
Again, ticking the checkbox has no effect. Any ideas?
467
Every time the checkbox is clicked, the handleClick function is invoked. In the function, we check if the checkbox is checked and if it is, we set the display property of the div element to block to show it. If you uncheck the checkbox, the div's display property is set to none and the element is hidden.
To show or hide the field, we are applying CSS through jQuery css() method. We are passing CSS display property. To hide the field, we set the display property to none and to show it we set the display property block. So you have seen how to show or hide input field depending upon a checkbox field.
Answer: Use the jQuery toggle() method The following example will demonstrate you how to show and hide div elements based on the selection of checkboxes using the jQuery toggle() method. The div boxes in the example are hidden by default using the CSS display property which value is set to none .
You have to wrap checkbox element within div element with selector id attribute.
The vue element which you're creating it is only available for the div which contains the checkbox.
var app = new Vue({
el: '#selector',
data: {
checked: false
}
});<script src="https://unpkg.com/vue/dist/vue.js"></script>
<body>
<div id="selector">
<div class="checkbox">
<label><input type="checkbox" v-model="checked">Options</label>
</div>
<div class="container" id="app-container" v-if="checked">
<p>Text is visible</p>
</div>
</div>
</body>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
