Vuejs togg div Sichtbarkeit auf Kontrollkästchen Auswahl

Ich versuche, die Sichtbarkeit eines Container-Div mit Vuejs zu schalten Ich habe zwei Methoden wie unten versucht, aber keine Auswirkungen auf die Sichtbarkeit des Containers. Methode 1:Vuejs togg div Sichtbarkeit auf Kontrollkästchen Auswahl

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

Ich weiß Vue.js Lasten OK, tickt das Kontrollkästchen keine Auswirkung auf Text Sichtbarkeit.

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

Auch hier hat das Ankreuzfeld tickt keine Wirkung. Irgendwelche Ideen?

Quelle

2017-02-18 Don Smythe

Sie haben checkbox Element innerhalb div Element mit selector id-Attribut wickeln.

Das Element vue, das Sie erstellen, ist nur für das div verfügbar, das die checkbox enthält.

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>

Quelle

2017-02-18 10:51:04

Vuejs togg div Sichtbarkeit auf Kontrollkästchen Auswahl

Antwort

Verwandte Themen