web-dev-qa-db-ja.com

Vuejsはチェックボックス選択でdivの可視性を切り替えます

Vuejsを使用してコンテナーdivの可視性を切り替えようとしています。以下の2つの方法を試しましたが、どちらもコンテナーの可視性に影響を与えません。方法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>

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>

この場合も、チェックボックスをオンにしても効果はありません。何か案は？

javascriptvue-componentvue.js
7
Don Smythe

checkbox要素をdivid属性でselector要素内にラップする必要があります。

作成しているvue要素は、checkboxを含むdivでのみ使用できます。

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>
9
Mihai Alexandru-Ionut