80717
  
  
### 実現したいこと

CSSのセレクタを複数追加したいです。  
通常は、表示側で `:class`でバインディングし、カンマ区切りでオブジェクトを追加していけば良いかと思うのですが、  
今回は、vue.jsのフィルタ機能（このフィルタ関数も、cssのセレクタを返します） を併用したく、  
やり方が分からず困っています。  
やりたいこと①②を同時に実現できる書き方は存在するでしょうか？

### 実現したいこと（詳細）

①hogeのproperty_aによって、HogeFilter（以下）を発動させて  
cssのセレクタ（apple / peach / bananaいずれか）をまず１つ付与する

[code]

    HogeFilter (property_a) {
        if (property_a === 'apple') {
          return 'apple'
        } else if (property_a === 'peach') {
          return 'peach'
        } else {
          return 'lemon'
        }
    
[/code]

②hogeのproperty_bがtrueの場合、さらにセレクタ（add_selector)を付与する

### 求める結果（一例）

[code]

    //property_aの値が 'apple' かつ property_bの値が trueの場合
    class = "apple add_selector" 
    //property_aの値が 'banana' かつ property_bの値が falseの場合
    class = "banana" 
    
[/code]

### 試したこと

以下の書き方だと、property_aの値が 'apple' かつ property_bの値が trueの場合でも  
後者のみが作動してしまう結果になりました。

[code]

    // 試したこと
    :class="[hoge.property_a | HogeFilter, 'add_selector' : hoge.property_b]
    
    //結果
    class = "add_selector"
    
[/code]

### その他

HogeFilterは汎用的に使用しているもので、できればこのフィルタ関数自体の変更は避けたいです。


CC BY-SA 4.0
2021-08-11T02:23:16.827
80713
2021-08-11T06:40:10.523
2021-08-11T06:36:04.720
3060
47664
question
javascript css vue.js
vue.jsでCSSの複数セレクタのバインディングをする方法（vueのフィルタ機能との併用）

[code]

    computed: {
        makeClass: function () {
            //ここでproperty_aとproperty_bでclassの値を作る。
           var targetClass = "";
           ......
    
           return targetClass;
        }
    },
    
    
[/code]

[code]

    :class="makeClass"
    
[/code]


CC BY-SA 4.0
2021-08-11T06:40:10.523
80717
2021-08-11T06:40:10.523
35698
80713
answer