Why `new-message` didn't display?
AtomicVar opened this issue · 2 comments
AtomicVar commented
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?
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?
ZJUGuoShuai commented
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.
jmaczan commented
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