0

実現したいこと

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は汎用的に使用しているもので、できればこのフィルタ関数自体の変更は避けたいです。

1 件の回答 1

0
computed: {
    makeClass: function () {
        //ここでproperty_aとproperty_bでclassの値を作る。
       var targetClass = "";
       ......

       return targetClass;
    }
},

:class="makeClass"

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。