条件に基づいてv-forの各要素に2つのクラスを切り替えます

Question

私は2人のユーザーの間でvue 2のチャットのリストを表示しようとしています。 私のスタイルでは、2つのクラス 'left'と 'right'チャットが第1のユーザまたは最後のユーザに属するかどうかを表示する。

はここにここに私のループ

<div class="row chats-container"> 
    <div class="row chat-message clearfix" 
     v-for="chat in chats"> 
     <img src="./../../assets/userDefault.png" alt=""> 
     <span>{{chat.chat}}</span> 
    </div> 
</div> 

である私が使用したい条件である：私は2つのクラスを切り替えたい'v-if="auth.id === chat.sender.id"'

：leftと

rightは、いくつかの助けが必要.. 。

Answer 1

class属性バインディングは、のように使用できますをクリックし、vue-componentのプロパティとメソッドを使用できます。

<div class="row chats-container"> 
    <div 
     v-for="chat in chats" 
     :class='{"row": true, "chat-message": true, "clearfix": true, "left": auth.id !== chat.sender.id, "right": auth.id === chat.sender.id}' 
    > 
    <img src="./../../assets/userDefault.png" alt=""> 
    <span>{{chat.chat}}</span> 
    </div> 
</div> 

というの長さは（それが私を悩ます）あなたを不愉快にさせる場合は、セットアップの方法ことができます：

methods: { 
    textMessageStyle (chat) { 
    return { 
     "row": true, 
     "chat-message": true, 
     "clearfix": true, 
     "left": auth.id !== chat.sender.id, 
     "right": auth.id === chat.sender.id 
    } 
    } 
} 

、その後：

<div class="row chats-container"> 
    <div 
     v-for="chat in chats" 
     :class="textMessageStyle(chat)" 
    > 
    <img src="./../../assets/userDefault.png" alt=""> 
    <span>{{chat.chat}}</span> 
    </div> 
</div>