経由でアクセス可能なデータがあります。
{{ content['term_goes_here'] }}
... でアクセスできるデータがあり、これは true
か false
のどちらかに評価されます。 表現の真偽に応じて、次のようにクラスを追加したいと思います。
<i class="fa" v-bind:class="[{{content['cravings']}} ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"></i>
ここで、true
はfa-checkbox-marked
、false
はfa-checkbox-blank-outline
というクラスになります。 上記の書き方ではエラーが出てしまいます。
- invalid expression: v-bind:class="[{{content['cravings']}} ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"
条件付きでクラスを決定できるようにするには、どのように書けばよいのでしょうか。
オブジェクト構文]1を使用します。
v-bind:class="{'fa-checkbox-marked': content['cravings'], 'fa-checkbox-blank-outline': !content['cravings']}"
オブジェクトが複雑になると、メソッドに抽出します。
v-bind:class="getClass()"
methods:{
getClass(){
return {
'fa-checkbox-marked': this.content['cravings'],
'fa-checkbox-blank-outline': !this.content['cravings']}
}
}
最後に、これをどんなコンテンツのプロパティにも使えるようにするには、次のようにします。
v-bind:class="getClass('cravings')"
methods:{
getClass(property){
return {
'fa-checkbox-marked': this.content[property],
'fa-checkbox-blank-outline': !this.content[property]
}
}
}
問題はブレードです。
<i class="fa" v-bind:class="['{{content['cravings']}}' ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"></i>