Vuejs toggle div visibility on checkbox selection

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?

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>

来源：https://stackoverflow.com/questions/42314118/vuejs-toggle-div-visibility-on-checkbox-selection

标签

javascript

vue-component

Vue.js