I am new to vue JS and got stuck in vue class component creation I am using following setup:
@rails/webpacker: "^5.1.1" typescript: "^4.0.2" vue: "^2.6.11" vue-class-component: "^7.2.5"
Here is my code:
MockChat.vue
<template>
<div id="mock-chat" class="container" v-cloak>
<div class="row">
<Chat
:messages="messages"
:handleCmdEnter="handleCmdEnter"
:handleBtnEnter="handleBtnEnter"
/>
<div class="col-md-4">
<div id="inputs" class="col-md-12">
<label for="agent_id">Agent ID</label>
<input
placeholder="Agent ID Input"
v-model="selectedAgentId"
type="text"
name="agent_id"
class="form-control"
rows="1"
/>
</div>
<div class="col-md-12">
<Sidebar
:businessUnit="selectedBusinessUnit"
:businessUnits="businessUnits"
:graph="selectedGraph"
:graphs="graphs"
:selectGraph="selectGraph"
:state="state"
:dataTopics="dataTopics"
:recommendation="recommendation"
:messages="messages"
:handleCmdEnter="handleCmdEnter"
:handleBtnEnter="handleBtnEnter"
:handleNextIndex="handleNextIndex"
:sendText="sendText"
:selectBusinessUnit="selectBusinessUnit"
:getBusinessUnitData="getBusinessUnitData"
:backResponse="backResponse"
:handleTopicSwitch="handleTopicSwitch"
:topicSwitchEnabled="topicSwitchEnabled"
:backButtonEnabled="backButtonEnabled"
/>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
// @ts-ignore
import Chat from "./components/mock_chat/Chat.vue";
// @ts-ignore
import Sidebar from "./components/mock_chat/Sidebar.vue";
import $ from "jquery";
@Component({
components: {
Chat,
Sidebar
}
})
export default class MockChat extends Vue {
// Props
@Prop() businessUnit: string;
@Prop() businessUnits: string[];
@Prop() topics: string[];
@Prop() chatUid: number;
@Prop() topicSwitchEnabled: boolean;
@Prop() backButtonEnabled: boolean;
@Prop() graph: string;
@Prop() graphs: string[];
// data
// data: {
// messages: any[];
// };
messages: any[];
state: object;
recommendation: object;
selectedBusinessUnit: string = this.businessUnit;
selectedGraph: string = this.graph;
dataTopics: string[] = this.topics;
selectedTopic: string;
selectedAgentId: string = "";
mockview: boolean = true;
// lifecycle methods
created() {
// this.getBusinessUnitData();
}
// methods
sendMessage(role, message) {
let apiName = this.businessUnits.find(
businessUnit => businessUnit[1] === this.selectedBusinessUnit
)[1];
let graphUuid = this.selectGraphUuid();
let selectedAgentId = this.selectedAgentId;
let params = {
chat_uid: this.chatUid,
role: role,
message: message,
business_unit: apiName,
graph: graphUuid,
agent_id: selectedAgentId
};
$.post("/mock_chat/message", params, data => {
this.recommendation = data;
this.messages.push({
role: params.role,
message: params.message,
responses: data.responses,
nodeName: data.node_name
});
if (data.state) {
this.state = data.state.patient_info;
}
this.resetAfterMessage();
});
}
resetAfterMessage() {
Vue.nextTick(() => {
document.getElementById("transcript-row").scrollTop = 100000;
});
}
selectGraphUuid() {
if (this.graphs.length) {
return this.graphs.find(graph => graph[1] === this.selectedGraph)[1];
}
// If there are no graphs send nothing to the back end, where it can be handled
return null;
}
handleBtnEnter(e) {
let role = e.target.role.value;
let message = e.target.message.value;
this.sendMessage(role, message);
}
handleCmdEnter(e) {
let role = e.target.form.role.value;
let message = e.target.form.message.value;
e.target.form.message.value = "";
this.sendMessage(role, message);
}
handleTopicSwitch(apiName) {
var that = this;
let graphUuid = this.selectGraphUuid();
let selectedAgentId = this.selectedAgentId;
var params = {
chat_uid: this.chatUid,
topic: apiName,
business_unit: this.selectedBusinessUnit,
graph: graphUuid,
agent_id: selectedAgentId
};
$.post("/mock_chat/topic", params, function(data) {
that.recommendation = data;
that.messages.push({
nodeName: data.node_name,
role: "system",
message: "new topic: " + apiName,
responses: data.responses
});
that.resetAfterMessage();
});
}
handleNextIndex(index) {
let params = {
chat_uid: this.chatUid,
index: index,
role: "next_click",
business_unit: this.selectedBusinessUnit
};
$.post("/mock_chat/next", params, data => {
this.recommendation = data;
this.messages.push({
role: "system",
message: "next: " + index,
responses: data.responses,
nodeName: data.node_name
});
this.resetAfterMessage();
});
}
backResponse() {
$.post(
"/mock_chat/back",
{
chat_uid: this.chatUid
},
data => {
this.recommendation = data;
this.messages.push({
role: "system",
message: "back",
responses: data.responses,
nodeName: data.node_name
});
this.resetAfterMessage();
}
);
}
sendText(text) {
let role = "agent";
let message = text;
this.sendMessage(role, message);
}
selectBusinessUnit(event) {
this.selectedBusinessUnit = event.target.value;
this.getBusinessUnitData();
}
getBusinessUnitData() {
let params = {
business_unit: this.selectedBusinessUnit
};
$.post("/mock_chat/get_business_unit_data", params, data => {
this.dataTopics = data.topics;
this.selectedTopic = data.selected_topic;
});
}
selectGraph(event) {
this.selectedGraph = event.target.value;
}
}
</script>
here the warning:
[Vue warn]: Property or method "messages" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property
I am passing messages data to Chat component and its not identifying it.
I am getting this error even when i used data: {} option to declare the data properties.
any help appreciated.
