138
rated 0 times
[
142]
[
4]
/ answers: 1 / hits: 16258
/ 7 Years ago, sat, february 18, 2017, 12:00:00
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?
More From » vue-component
