現在、**v-bind:class="オブジェクト"**という形で、オブジェクトのキーに対応する値を他の変数から取得しようとしているのですが、思ったとおりに挙動してくれません。
初学者ゆえ簡単な質問かもしれませんが、ご回答お願いいたします。
##ソースコード
html
1<p v-bind:class="fuga">こんにちは。</p>
JavaScript
1var app = new Vue ({ 2 el: '#app', 3 data: { 4 flag: true, 5 fuga: { 6 center: true, 7 fSize: this.flag, ←fSizeクラスがtrueにならない 8 }, 9 }, 10});
css
1.center { 2 text-align: center; 3} 4 5.fSize { 6 font-size: 4rem; 7 color: red; 8}
解決したいこと
fSizeの値をflagと同期させて、flagによってpタグにfSizeクラスを付与したい。
##起こった問題
flagをtrueにしても、fSizeクラスがtrueになりません。(fSizeクラスがpタグに付与されない。)
##やったこと
flagをfalseにした上で、this.flagに対してクオーティングしたが、fSizeが常にtrueになってしまった。
これは、this.flag自体はそもそもすでに存在しているからでは?
JavaScript
1var app = new Vue ({ 2 el: '#app', 3 data: { 4 flag: false, ←変更 5 fuga: { 6 center: true, 7 fSize: 'this.flag', 8 //↑クオーティングしたが、常にtrueになってしまった。 9 //this.flagはすでに存在しているため、常にtrueになってしまったのでは? 10 }, 11 }, 12});
##補足情報
MacOS BigSur 11.3.1
Vue 2.6.12
あなたの回答
tips
プレビュー