Как сделать вывод новых сообщений в виде чата в vue.js?

Question

[Zubastik_1]

Задача набросать простенький чат на vue.js Не знаю с какой стороны подступиться. Чат не настоящий, просто демка. Например я пишу "Привет" и получаю в ответ Привет, сэр. Пишу Как дела и получаю ответ Как дела, сэр. Итд. Интересует только момент построения дерева

Всё в рамках изучения vue.js. В JQuery я бы просто добавлял новые сообщения под старыми и так бы строилось дерево. А вот как это же сделать в Vuejs?

Answer 1

[Evgeny Kulakov]

Создаете массив в data, пушите в него сообщение, в шаблоне выводите этот массив через v-for.

Comments

[Дмитрий Кузнецов]

Скорей всего автору это не подходит. Как я понял, он хочет что бы сообщения были в виде диалога как вк (как пример). Т.е. что бы было отличие сообщения моё-чужое.

[Александр Шелеметьев]

Да в том же data сделать массив не строк, а объектов:

data () {
  return {
    messages [
     {"id": 1, "from": "me", "text":"Привет"},
     {"id": 2, "from": "bot", "text":"Привет, сэр"},
     {"id": 3, "from": "me", "text":"Как дела"},
     {"id": 4, "from": "bot", "text":"Как дела, сэр"}
    ]
  }
}

А в процессе добавляете в this.messages новые объекты вида {"id": 5, "from": "me", "text":"Сообщение"}

[Zubastik_1]

Спасибо. Написал такой код

new Vue({
   el: "#app",
   a: false,
   data: {
      input: null,
      messages: []
   },
   methods:{
      newMessage: function(e) {
         data = {user:localStorage.getItem('user'), message: this.input};
         this.messages.push(data);
         this.input = null;
      }
   },
   created: function(){
      if ( !localStorage.getItem('user') ) {
         localStorage.setItem("user", "Николай");
      } 
   }
});

Только упёрся - не могу сообразить как теперь сделать кнопку отправки активной только при заполненном поле сообщения.

[Zubastik_1]

Александр Шелеметьев, спасибо, насчёт id - интересная мысль, надо бы как то её использовать (может быть для хранения в localstorage) Только вопрос как их сгенерировать теперь в vue.js.

[Александр Шелеметьев]

Zubastik_1,
id? Например, так:

let newId = (this.messages.map(x => x.id).sort((a, b) => b - a)[0] || 0) + 1

Или просто храни счётчик