Vue2でマルチクラスバインディングを追加するには

Vue2にマルチクラスbindingを置くと、1つの問題が発生しました。Vue2でマルチクラスバインディングを追加するには

<div class="list-item clearfix" v-on:click="selectItem(trail)" :class="popupMode ? 'popup' : ''">

はここpopupModeは小道具であると私はItem(click function:のSelectItem（）)を選択すると、私は1つ以上classbindingを追加したいと思います。

たとえば、selectedと同様です。

このclassが定義されています。この問題をどうやって管理できますか？

出典

2017-11-10 Alex

更新HTMLクラスのバインドのような：isSelectedはpopupModeのような新しい小道具がある

v-bind:class="{ popup: popupMode, selected: isSelected }"

。要素selectItemが呼び出されたときにクリックすると、ブールisSelectedの小文字をtrueに設定すると、その後にselectedクラスが表示されます。

JS：

data: { 
    popupMode: true, 
    isSelected: false 
}, 
methods: { 
    selectItem() { 
     this.isSelected= true; 
    } 
}

詳細情報については、この点を確認してください。Binding HTML Classes

出典

2017-11-10 15:45:50

@palasH、それは私のために動作します。しかし、私はこれを使用する問題があります。たとえば、5つのアイテムがあります。最初のアイテムを傷つけると、グレーの色に変更されます。私が次の（二番目の）項目を表示すると、最初の項目を元の状態に変更したいと思います.2番目の項目も灰色に変更されます。この場合、どうすればいいですか？ – Alex

'default'クラスを黒色で作成することも、元のステータスカラーとして設定する他の色を作成することもできます。 '{popup：popupMode、selected：isSelected、default：！isSelected} 'のようにバインドクラスを更新します。このようにして、1つのクラスだけが 'selected'クラスとして一度に設定されます。 –

デフォルトのクラスは 'class =" list-item clearfix "'です。この場合、どうすればいいですか？ – Alex

あなたは、この方法を試すことができます。

{ active: isActive, 'text-danger': hasError }

は、（この場合は）dataで開催isActiveとhasErrorを忘れないでください。私はこの助けを願っています。

出典

2017-11-10 15:45:38

Vue2でマルチクラスバインディングを追加するには

答えて

関連する問題