Как сгруппировать сообщения по дате с помощью vue.js? [Vue warn]: у вас может быть бесконечный цикл обновления - PullRequest
0 голосов
/ 14 марта 2019

Я пытаюсь сгруппировать сообщения по дате, как в мессенджере facebook. Я получаю ошибку [Vue warn]: у вас может быть бесконечный цикл обновления в функции рендеринга компонента

Вот JSFiddle для простого кода.

var app = new Vue({
        el: "#app",
        data: {
            messages: [
                {
                    content: "Hello",
                    position: "left",
                    created_at: 1551437421000
                },
                {
                    content: "Hi",
                    position: "right",
                    created_at: 1551437421000
                },
                {
                    content: "How are you",
                    position: "left",
                    created_at: 1551523821000
                },
                {
                    content: "I'm fine",
                    position: "right",
                    created_at: 1551610221000
                },
                {
                    content: "Nice to meet you!",
                    position: "right",
                    created_at: 1551610221000
                },
                {
                		content: "How's going?",
                    position: "left",
                    created_at: 1551869421000,
                },
                 {
                    content: "Fine",
                    position: "right",
                    created_at: 1551869421000
                },
            ],
            temp: {
                old_unique_date: null
            }
        }, 
        methods: {          
        	groupByDate(date){
          	var old_date = this.temp.old_unique_date;
            var new_date = new Date(date).getDate();
            if(old_date != new_date){
              this.temp.old_unique_date = new_date;
              var day =  ("0" + new Date(date).getDate()).slice(-2);
              var month =  ("0" + (new Date(date).getMonth() + 1)).slice(-2);
              var date_data = day +"/"+ month;
              return date_data;
            }else{
              return "";
            }
        	}
    		}
      })
.message {
  background: lightblue;
  padding: 10px 20px;
  margin: 10px 0;
  max-width: 60%;
  border-radius: 10px;
}

.left {
  float: left;
  margin-left: 10px;
}

.right {
  float: right;
  margin-right: 10px;
}

.chat_room {
  position: relative;
}

.date {
  text-align: center;
  color: red;
}

.c_f {
  clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
  <div class="chat_room">
    <div v-for="message in messages">
      <div class="date" v-html="groupByDate(message.created_at)">
      </div>
      <div class="message" :class="message.position">
        {{message.content}}
      </div>
      <div class="c_f"></div>
    </div>
  </div>
</div>

Вы можете увидеть красную дату. create_at - дата отправки сообщения. Когда сообщение отправляется 01/03, я хотел бы показать только одно 01/03 для всех сообщений, дата отправки которых - 01/03. Это видно нормально в поле зрения. Но у него есть консольная ошибка, называемая «[Vue warn]: у вас может быть бесконечный цикл обновления в функции рендеринга компонента».

...