Vuejs toggle div visibility on checkbox selection

Я пытаюсь переключить видимость контейнера div с помощью Vuejs. Я пробовал два метода, как показано ниже, но ни один из них не влияет на видимость контейнера. Метод 1:Vuejs toggle div visibility on checkbox selection

<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>

Я знаю, что Vue.js загружается нормально, пометка флажка не влияет на видимость текста.

Метод 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>

Опять же, помечая флажок не имеет никакого эффекта. Есть идеи?

источник

2017-02-18 Don Smythe

Вы должны обернуть checkbox элемент в пределах div элемент с атрибутом selector.

Элемент vue, который вы создаете, доступен только для div, который содержит 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>

источник

2017-02-18 10:51:04

Vuejs toggle div visibility on checkbox selection

ответ

Смежные вопросы