[解決済み] Vue.js。条件付きクラススタイルバインディング

質問

私は、いくつかのデータにアクセスすることができます。

{{ 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']"

条件付きでクラスを決定できるようにするには、どのように書けばよいでしょうか？

どのように解決するのですか？

この場合 オブジェクトの構文 .

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