実現したいこと
CSSのセレクタを複数追加したいです。
通常は、表示側で :class
でバインディングし、カンマ区切りでオブジェクトを追加していけば良いかと思うのですが、
今回は、vue.jsのフィルタ機能(このフィルタ関数も、cssのセレクタを返します) を併用したく、
やり方が分からず困っています。
やりたいこと①②を同時に実現できる書き方は存在するでしょうか?
実現したいこと(詳細)
①hogeのproperty_aによって、HogeFilter(以下)を発動させて
cssのセレクタ(apple / peach / bananaいずれか)をまず1つ付与する
HogeFilter (property_a) {
if (property_a === 'apple') {
return 'apple'
} else if (property_a === 'peach') {
return 'peach'
} else {
return 'lemon'
}
②hogeのproperty_bがtrueの場合、さらにセレクタ(add_selector)を付与する
求める結果(一例)
//property_aの値が 'apple' かつ property_bの値が trueの場合
class = "apple add_selector"
//property_aの値が 'banana' かつ property_bの値が falseの場合
class = "banana"
試したこと
以下の書き方だと、property_aの値が 'apple' かつ property_bの値が trueの場合でも
後者のみが作動してしまう結果になりました。
// 試したこと
:class="[hoge.property_a | HogeFilter, 'add_selector' : hoge.property_b]
//結果
class = "add_selector"
その他
HogeFilterは汎用的に使用しているもので、できればこのフィルタ関数自体の変更は避けたいです。