vueでv-ifを使いトグルを作成したいが、ボタンが反応しない。
作成したいもの
WEBアプリを制作しています。
今回掲示板の作成中で、コメントなどでよくある続きを表示、非表示するボタンを作成したいです。
エラー
vue-ifを使いトグルを作成したい。
下記のコードでvue-ifの部分は表示されるが、ボタンが反応していないのか、v-elseで指定したコードが表示されない。
html
<div id="app">
<b-col cols="12" style="font-size: calc(12px + 0.3vw);">
<p v-if="toggle">{{search.comment}}</p>
<p v-else style="overflow: hidden; height: 100px;">{{search.comment}}</p>
<button @click="toggleBtn">切り替え</button>
</b-col>
</div>
<script>
app = new Vue({
el: "#app",
methods: {
toggleBtn: function () {
this.toggle = !this.toggle
},
},
data: {
toggle: true,
},
});
</script>
至らない点も多々あるかと思いますがよろしくお願いします。
0 likes