jmaczan/basic-vue-chat

Why `new-message` didn't display?

AtomicVar opened this issue · 2 comments

I wrote a simple app that the bot will repeat what I typed:

<template>
  <div id="container" class="container">
    <basic-vue-chat
      :title="'AI-Chatbot'"
      :initial-feed="feed"
      :new-message="message"
      @newOwnMessage="onNewOwnMessage"
    />
  </div>
</template>

<script>
import BasicVueChat from "basic-vue-chat";
import moment from 'moment';

const initialFeed = [
  {
    id: 1,
    author: "Bot",
    contents: "你好!",
    date: moment().format('HH:mm:ss')
  }
];

let contents = "fuckmeover";

export default {
  data: function() {
    return {
      feed: initialFeed,
      message: {
        id: 1,
        author: "Bot",
        contents: contents,
        date: moment().format('HH:mm:ss')
      }
    };
  },
  methods: {
    onNewOwnMessage: msg => {
      contents = msg;
    }
  },
  components: {
    BasicVueChat
  }
};
</script>

But after I send my message, nothing happened. Why?
image

I'm a new Vue user, so it may be a stupid question.

Edit: And I can update initalFeed to implement this (by push new messages to it). So what is new-message used for?

SORRY! I just learned something about Vue's Reactivity and knew that you should change the root attribute of data directly then the change can be tracked.

And DON'T USE ARROW FUNCTIONS IN VUE'S METHODS! Or you cannot use this to refer to the vue object.

I learned these two things from this.

Hello Guo,

I'm happy that you found out the solution on your own. I hope that you will be happy BVC user 🙂

Greetings,
Jędrzej