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?
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?
Share Improve this question asked Feb 18, 2017 at 10:47 Don SmytheDon Smythe 9,81415 gold badges65 silver badges108 bronze badges1 Answer
Reset to default 15You 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>