0

I have an array as shown in below picture. How do I add conditional CSS class to

  • based on the key sender_id of the array in VueJS ?

    conditions: 1)if sender_id != sender_id : add arrived class 2)if sender_id == sender_id : add delivered class.

    The goal is to add CSS styling as per the arrived or delivered message in a chat application.

    enter image description here

    2 Answers 2

    2
    <div v-bind:class="{ 'myClass1': sender_id === sender_id, 'myClass2': sender_id !== sender_id }" class="otherClass"></div>
    

    https://v2.vuejs.org/v2/guide/class-and-style.html

    Sign up to request clarification or add additional context in comments.

    Comments

    1

    Use ternary operation:

    <span :class="todo.sender_id === sender_id ? 'delivered' : 'arrived'">{{message}}</span>
    

    Check a sample fiddle here

    Comments

    Your Answer

    By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

    Start asking to get answers

    Find the answer to your question by asking.

    Ask question

    Explore related questions

    See similar questions with these tags.