Как выводить напечатанные сообщения?

Question

Только начинаю изучать vue, и решил начать делать простой чат. Проблема такова что я не понимаю, почему у меня не выводится сообщения которые я печатаю?

<template>
  <div class="hello">
    <h1>Vue chat!</h1>
    <div>
      messages:
      <div v-for="message in messages" :key="message">
        {{user}} {{ message }}
      </div>
      <input type="text" v-bind:value="messages">
      <input type="text" v-bind:value="user">
      <button @click="sendMSG">send</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data: function () {
    let data = {
      messages: [],
      user: [],
    };
    return data;
  },
  methods: {
    addMSG(){
      this.messages.push()
    }
  }
};
</script>

Answer 1

Потому-что:

Нужно использовать отдельные переменные для массива сообщений и для полей
В функцию push надо передавать значение
Prop msg не используется нигде
Объявлена функция addMSG, а вызывается sendMSG
Для получения значения из input нужно использовать v-model

Как-то так должно быть:

<template>
  <div class="hello">
    <h1>Vue chat!</h1>
    <div>
      messages:
      <div v-for="(message, index) in messages" :key="index">
        {{ message.user }} написал {{ message.text }}
      </div>
      <br>
      <input type="text" v-model="user" />
      <input type="text" v-model="text" />
      <button @click="sendMsg">send</button>
    </div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      messages: [],
      text: '',
      user: ''
    };
  },
  methods: {
    sendMsg() {
      this.messages.push({user: this.user, text: this.text});
    },
  },
};
</script>

БЛОГ НА HUSL

Как выводить напечатанные сообщения?

Ответы (1 шт):