Dynamically change the class name Vue-CodePudding

 <div
        v-bind: 
        v-for="message in msg"
        :key="message.messageId"
      >

  updateClassValue() {
   for ( const eachMsg in this.msg.itemList) {

      if (eachMsg._sender.userId !== this.nickname) {
        return false;
      } else {
        return true;
      }
      }
   }
  }

I want the div to have class name 'chat-item me' when updateClassValue is true and 'chat-item stranger' otherwise. Yet, somehow above code only results in 'chat-item stranger'. If anyone could give me some insight, I would greatly appreciate it.

CodePudding user response：

The updateClassValue should be defined inside the computed option instead of methods :

computed:{
  updateClassValue() {
   for ( const eachMsg in this.msg.itemList) {

      if (eachMsg._sender.userId !== this.nickname) {
        return false;
      } else {
        return true;
      }
      }
   }
  }
}

CodePudding user response：

As per my understanding, You have a set of messages in a chat window and you want to add styles to make differentiate between messages you sent and the messages you received from other person. If Yes, you can directly do that in template itself without any separate method/computed property.

Live Demo :

new Vue({
  el: '#app',
  data: {
    msg: {
        itemList: [{
        messageId: 1,
        userId: 1,
        text: 'Hi'
      }, {
        messageId: 2,
        userId: 2,
        text: 'Hello'
      }, {
        messageId: 3,
        userId: 1,
        text: 'How are you ?'
      }]
    }
  }
})

.chat-item-me {
  background-color: green;
}

.chat-item-stranger {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div
        v-for="message in msg.itemList"
        :key="message.messageId"
        v-bind: 
      >
      {{ message.text }}
  </div>
</div>