vueでkey自体に三項演算子を書く方法

Question

classの中身を三項演算子で書くとこうなると思いますが、

<li :class=“{‘is-active’: (viewName === ‘music’)}“>Music</li>

:classの部分を三項演算子で書くことはできますでしょうか。

is-activeが1なら

<li filterable>Music</li>

でis-activeが0なら

<li clearable>Music</li>

こうしたいですが、
方法がよくわかりませんでした。。

Answer 1

v-bind に渡すオブジェクトを、3項演算子で切り替えるように実装してみました。

<li v-bind="(viewName === 'music') ? {'filterable':''} : {'clearable':''}">Music</li>

Answer 2

v-bind="obj"の形でオブジェクトを渡して属性を指定できるので
これを応用すれば実現できるような気もします。

Vueの公式ページ
オブジェクトのプロパティの受け渡し

イメージこんな感じでしょうか？

<li v-bind="obj">Music</li>


obj : {
  filterable: is-active ? true : false,
  clearable: !is-active ? true : false,
}