[解決済み] v-bind:Styleのコンディション

質問

簡単な質問ですが、よろしくお願いします。

<div>
  <figure :style="{ 'background': 'url(' + item.main_featured + ') center no-repeat' }">
</div>

APIからのURLが未定義の場合、style属性'background'が色を返すようにしたい。

例

item.featured_photoがNULLでない場合。

<figure style="background: url('localhost:6969/image.img') center no-repeat">

item.featured_photoがNULLの場合。

<figure style="background: #FFF">

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

VueJSのV-bind:styleでコンディションを使用します。

v-bind:style= "[condition ? {styleA} : {styleB}]"

以下は最小限の例です。

<figure :style="[item.main_featured ? {'background': 'url(' + item.main_featured + ') center no-repeat'} : {'background': '#FFF'}]">

もし、あなたが 親-子-条件 が必要なら、これは魔法です。

v-bind:style= "[condition_1 ? condition_2 ? {styleA} : {styleB} : {styleC}]"

の略で。

if (condition_1) {
   if (condition_2) {
      return styleA
   } else {
      return styleB
   }
} else {
  return styleC
}

お役に立てれば幸いです。