Как мне сгруппировать сообщения, которые я отправил справа, синим цветом и сообщения, которые я получаю слева, желтым цветом, используя flexbox и vue?

Question

Я создал систему обмена сообщениями с vue и внутренним интерфейсом laravel, и я хочу сгруппировать сообщения, которые являются моими (Джим, человек, в котором я в настоящее время вошел в систему) справа в синем и Дебби (пользователь I ').я разговариваю с) слева желтым, используя flexbox.Например, Facebook или Twitter:

---

---

Ложный вывод JSON

{
    "0": {
        "name": "Debbie",
        "message": "Good, Thinks for asking."
    },
    "1": {
        "name": "Jim",
        "message": "I'm good, how are you?"
    },
    "2": {
        "name": "Debbie",
        "message": "How are you?"
    },
    "3": {
        "name": "Jim",
        "message": "Hi Debbie"
    },
    "4": {
        "name": "Debbie",
        "message": "Hi Jim"
    }
}

Что мне нужно будет отправить через мой JSON API, чтобы идентифицировать себя по любому другому пользователю и их сообщениям?Или есть способ, которым я мог бы сделать это без необходимости делать это без изменения вывода JSON?

Как бы я внедрил это в эту систему обмена сообщениями, которую я построил , используя flexbox?Основным компонентом, с которым я работаю, является компонент разговорных сообщений:

Vue.component('conversation-messages',{
      template: '#conversation-messages',
      props: ['conversationId'],
      data: function() {
        return {
          messages: [],
          url: ''
        }
      },
      mounted() {
        console.log("message mounted")
        this.getOldMessages(this.conversationId);
      },
});

Вот ссылка на этот вопрос, на который отвечают только с использованием css.

ОтCSS-ссылка о том, как создать систему пузыря чата, например, FB

Пример структуры HTML из ссылки с использованием плавающих, а не Flexbox

<ul>
 <li class="him">By Other User</li>
 <li class="me">By this User, first message</li>
 <li class="me">By this User, secondmessage</li>
 <li class="me">By this User, third message</li>
 <li class="me">By this User, fourth message</li>
</ul>

Пример CSS из ответаВ ссылке

ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li{
  display:inline-block;
  clear: both;
  padding: 20px;
  border-radius: 30px;
  margin-bottom: 2px;
  font-family: Helvetica, Arial, sans-serif;
}

.him{
  background: #eee;
  float: left;
}

.me{
  float: right;
  background: #0084ff;
  color: #fff;
}

.him + .me{
  border-bottom-right-radius: 5px;
}

.me + .me{
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.me:last-of-type {
  border-bottom-right-radius: 30px;
}

Answer 1

Вы можете назначить класс с именем msgs для div, который окружает ваши сообщения, этот класс определяется следующими правилами:

tag:

 <div v-for="message in messages" class="msgs">

style:

 .msgs{
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:space-between;
   }

для каждого сообщения, которое вы должны обнаружить, если оно ваше.если это так, выровняйте его в конце, иначе выровняйте его в начале, связав классы и используя v-if и v-else, например:

    <div class="p-4 border-b"  v-if='message.name=="Jim"' :class="{me:message.name='Jim'}">
      <p>{{message.message}}</p>
    </div>
    <div class="p-4 border-b" v-else :class="{him:true}">
      <p>{{message.message}}</p>
    </div>    

вместо message.name=="Jim", вы можете использовать свойство объекта данных с именемitSMe которые обнаруживают подключенные пользовательские сообщения

Vue.component('conversations',{
      template: '#conversations',
      data: function(){
        return{
          showConversation: false,
          conversationId: null
        }
      },

      methods: {
         getConversation(conversation_id){
           this.conversationId = conversation_id
           this.showConversation = true
           console.log(this.conversationId)
        }
      },
});

Vue.component('converstations-list',{
      template: '#conversations-list',
      data: function() {
        return {
          conversations: [
            {id: 1, name: "Conversation with Debbie"},
            {id: 2, name: "Conversation with Steve"},
            {id: 3, name: "Conversation with Martin"},
          ]
        }
      },

      methods: {
        getConversation(conversation_id){
          this.$emit('open-conversation', conversation_id);
        }
      },
});

Vue.component('conversation-messages',{
      template: '#conversation-messages',
      props: ['conversationId'],
      data: function() {
        return {
          messages: [],
          url: ''
        }
      },
      mounted() {
        console.log("message mounted")
        this.getOldMessages(this.conversationId);
      },
      methods: {
        getOldMessages(conversation_id){
              
              //This will be replaced with backend conversation_id routes
              if(conversation_id === 1){
                this.url = 'https://codepen.io/Corbin/pen/YJppoL.js';
              }else if(conversation_id === 2) {
                this.url = 'https://codepen.io/Corbin/pen/EdNZjX.js';
              }else if(conversation_id === 3) {
                this.url = 'https://codepen.io/Corbin/pen/LgbxGd.js';
              }
                
              setTimeout(function() {
              axios({
                  method: 'get',
                  url: this.url,
              }).then(function(response) {
                  //console.log(response.data);

                  this.messages = response.data;
              }.bind(this))
              .catch(function(error) {
                  
              });
          }.bind(this))
      },
      }
});

new Vue({
  el: '#app',
});

.border-b{
padding:0 10px;
}
.msgs{
  
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
}
.me{
  align-self:flex-end;
  background: #0084ff;
  color: #fff;
}

.him{
  align-self:flex-start;
  background: #eee;
  float: left;
  border-radius: 20px 20px 20px 0;
}




.me {
  border-radius: 20px 0px 20px 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

<!-- Conversations -->
<script type="x/template" id="conversations">
  <div>
    <div class="flex w-full border-b">
       <button v-show="showConversation" class="pl-4 font-bold rounded" @click="showConversation = false" ><i class="material-icons">
        arrow_back_ios
       </i></button>
       <h1 class="py-4  text-center w-full" v-if="showConversation == false">All Conversations</h1>
       <h1 class="py-4 text-center w-full" v-if="showConversation">Conversation With</h1>
    </div>
    <converstations-list v-if="showConversation == false" v-on:open-conversation="getConversation($event)"></converstations-list>
    <conversation-messages :conversation-id="conversationId" v-if="showConversation"></conversation-messages>
  </div>
</script>

<!--Conversations List -->
<script type="x/template" id="conversations-list">
  <div>
    <div v-for="conversation in conversations">
      <h3 @click="getConversation( conversation.id)" class="cursor-pointer border-b p-4 hover:bg-blue">{{conversation.name}}</h3>
    </div>
  </div>
</script>

<!--Conversations Messages -->
<script type="x/template" id="conversation-messages">
  <div> 
      <div v-for="message in messages" class="msgs">
        <div class="p-4 border-b"  v-if='message.name=="Jim"' :class="{me:message.name='Jim'}">
        
          <p>{{message.message}}</p>
        </div>
     <div class="p-4 border-b" v-else :class="{him:true}">
         
          <p>{{message.message}}</p>
        </div>
      </div>
  </div>
</script>

<div id="app">

  <conversations></conversations>

</div>