applying conditional rendering in vue.js

Question

applying conditional rendering in vue.js

I'm currently working on developing a chat application using the guidelines outlined in this tutorial: https://socket.io/get-started/private-messaging-part-1/

One of my goals is to customize the appearance of the messages, so that when a message is sent by the user, it will have a grey background instead of the default white.

The challenge I am facing right now is that all messages are assigned the same CSS class (message), which makes it difficult to apply conditional styling. Is there a way to implement conditional styling based on the sender?

In the template section of the code:

    <ul class="messages">
      <li
        v-for="(message, index) in user.messages"
        :key="index"
        class="message"
      >
        <div v-if="displaySender(message, index)" class="sender">
          {{ message.fromSelf ? "(yourself)" : user.username }}
        </div>
        {{ message.content }}
      </li>
    </ul>

In the style section of the code:

.message {
  list-style: none;
  background-color: white;
  
  border: solid;
  border-color: gray;
  border-width: 1px;
  border-radius: 15px;

  margin-bottom: 10px;
  padding: 10px;
}

css vue.js

Answer 1

Answer №1

Develop a custom class, :class=..., that is determined by the status of message.fromSelf, and apply styling to the HTML element based on the class.

For instance, if we establish a custom class,

:class="message.fromSelf ? 'self-message' : ''"

Alternatively (credit goes to recommendation from Wittgenstein)

:class="{ 'self-message': message.fromSelf }"

and then define styles for it:

.self-message {
    background-color: gray;
}

The outcome will be like this:

https://i.sstatic.net/wmF6i.jpg

A small operational example program:

<script>
import { ref } from "vue";

export default {
  data() {
    return {
      messages: [
        {
          fromSelf: true,
          content: "Hello folks!",
          username: ''
        },
        {
          fromSelf: false,
          content: "Hello, back to you!",
          username: 'John'
        },
        {
          fromSelf: true,
          content: "How are you doing?",
          username: ''
        },
        {
          fromSelf: false,
          content: "I'm doing very well here, you?",
          username: 'John'
        },
      ],
    };
  },
};
</script>

<template>
  <ul class="messages">
    <li
      v-for="(message, index) in messages"
      :key="index"
      :class="{ 'self-message': message.fromSelf, 'message': true }"
    >
      <div class="sender">
        {{ message.fromSelf ? "(yourself)" : message.username + ":" }}
      </div>
      {{ message.content }}
    </li>
  </ul>
</template>

<style>
.message {
  list-style: none;
  background-color: white;
  
  border: solid;
  border-color: gray;
  border-width: 1px;
  border-radius: 15px;

  margin-bottom: 10px;
  padding: 10px;
}
  
.self-message {
  background-color: lightgray;
}
</style>

Answer 2

Develop a custom class, :class=..., that is determined by the status of message.fromSelf, and apply styling to the HTML element based on the class.

For instance, if we establish a custom class,

:class="message.fromSelf ? 'self-message' : ''"

Alternatively (credit goes to recommendation from Wittgenstein)

:class="{ 'self-message': message.fromSelf }"

and then define styles for it:

.self-message {
    background-color: gray;
}

The outcome will be like this:

https://i.sstatic.net/wmF6i.jpg

A small operational example program:

<script>
import { ref } from "vue";

export default {
  data() {
    return {
      messages: [
        {
          fromSelf: true,
          content: "Hello folks!",
          username: ''
        },
        {
          fromSelf: false,
          content: "Hello, back to you!",
          username: 'John'
        },
        {
          fromSelf: true,
          content: "How are you doing?",
          username: ''
        },
        {
          fromSelf: false,
          content: "I'm doing very well here, you?",
          username: 'John'
        },
      ],
    };
  },
};
</script>

<template>
  <ul class="messages">
    <li
      v-for="(message, index) in messages"
      :key="index"
      :class="{ 'self-message': message.fromSelf, 'message': true }"
    >
      <div class="sender">
        {{ message.fromSelf ? "(yourself)" : message.username + ":" }}
      </div>
      {{ message.content }}
    </li>
  </ul>
</template>

<style>
.message {
  list-style: none;
  background-color: white;
  
  border: solid;
  border-color: gray;
  border-width: 1px;
  border-radius: 15px;

  margin-bottom: 10px;
  padding: 10px;
}
  
.self-message {
  background-color: lightgray;
}
</style>

applying conditional rendering in vue.js

Answer №1

Similar questions

Image placed as background for registration form

What is the best way to use CSS to center two blocks with space in between them?

Trigger the opening of a class or window upon pressing the button

vue-dropzone fails to create thumbnails when a file is added

What strategies and techniques should be considered when creating websites optimized for mobile devices?

Why am I restricted to adjusting mat-elevation settings within the component's CSS exclusively?

Let's talk about the CSS properties for centering content and automatically

Cannot designate Vue setup function as asynchronous

Vuejs Emailjs Vee-validate TypeError: Unable to access property 'target' as it is undefined

Ensuring the aspect ratio of images stays consistent within a flexbox using CSS

Could a javascript loop be created to continuously activate a button with each iteration?

When utilizing state in ReactJS to modify the color of my button, the change does not take effect on the first click. How can I troub

Guide on how to fetch Laravel's CSRF token with a separate Vue frontend

Which one to choose for creating a Kahoot-like app: Laravel Sanctum or Passport?

Unspecified error encountered in the VUE selection view

I struggle with managing a z-index in conjunction with an absolute position

Adjust the navigation text and logo color as you scroll on the page

Scaling images using jQuery for enhanced visual appeal

Guide: Initiating an action in NuxtJs

Incorporating a CNAME into Your Vue.js Project