Typescript 属性或方法未在实例上定义，但在渲染期间被引用。确保此属性在“数据”选项中是被动的

我是vue JS新手，在创建vue类组件时遇到了麻烦 我正在使用以下设置：

@rails/webpacker:“^5.1.1” 类型脚本“^4.0.2” vue:“^2.6.11” vue类组件“^7.2.5”

这是我的密码：

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>

代理ID
从“Vue属性装饰器”导入{Component，Prop，Vue}；
//@ts忽略
从“/components/mock_Chat/Chat.vue”导入聊天；
//@ts忽略
从“/components/mock_chat/Sidebar.vue”导入侧栏；
从“jquery”导入$；
@组成部分({
组成部分：{
聊天，
边栏
}
})
导出默认类MockChat扩展Vue{
//道具
@Prop（）业务单元：字符串；
@Prop（）业务单元：字符串[]；
@Prop（）主题：字符串[]；
@Prop（）chatUid:number；
@Prop（）topicSwitchEnabled：布尔值；
@Prop（）backButtonEnabled：布尔值；
@Prop（）图：字符串；
@Prop（）图形：字符串[]；
//资料
//数据：{
//信息：任何[]；
// };
信息：任何[]；
国家：对象；
建议：目标；
selectedBusinessUnit:string=this.businessUnit；
selectedGraph:string=this.graph；
dataTopics:string[]=this.topics；
selectedTopic:字符串；
selectedAgentId:string=“”；
mockview:boolean=true；
//生命周期方法
创建（）{
//这是.getBusinessUnitData（）；
}
//方法
sendMessage（角色、消息）{
让apiName=this.businessUnits.find(
businessUnit=>businessUnit[1]==this.selectedBusinessUnit
)[1];
让graphuid=this.selectGraphuid（）；
让selectedAgentId=this.selectedAgentId；
设params={
聊天室uid:this.chatUid，
角色:角色,，
讯息:讯息,，
业务单位：apiName，
图形：graphuid，
代理id:selectedAgentId
};
$.post（“/mock_chat/message”），参数，数据=>{
本建议=数据；
这个是.messages.push({
角色：params.role，
message:params.message，
答复：数据。答复，
节点名称：data.node\u名称
});
if（data.state）{
this.state=data.state.patient\u info；
}
这是resetAfterMessage（）；
});
}
resetAfterMessage（）{
Vue.nextTick（（）=>{
document.getElementById（“转录本行”）.scrollTop=100000；
});
}
选择graphuid（）{
if（this.graphs.length）{
返回this.graphs.find（graph=>graph[1]==this.selectedGraph[1]；
}
//如果没有图形，则不向后端发送任何内容，在后端可以对其进行处理
返回null；
}
把手中心（e）{
让role=e.target.role.value；
让message=e.target.message.value；
this.sendMessage（角色、消息）；
}
handleCmdEnter（e）{
让role=e.target.form.role.value；
让message=e.target.form.message.value；
e、 target.form.message.value=“”；
this.sendMessage（角色、消息）；
}
手控开关（apiName）{
var=这个；
让graphuid=this.selectGraphuid（）；
让selectedAgentId=this.selectedAgentId；
变量参数={
聊天室uid:this.chatUid，
主题：apiName，
业务单元：此。选择业务单元，
图形：graphuid，
代理id:selectedAgentId
};
$.post（“/mock_chat/topic”），参数，函数（数据）{
建议=数据；
那就是推({
nodeName:data.node\u名称，
角色：“系统”，
信息：“新主题：”+apiName，
答复：数据.答复
});
resetAfterMessage（）；
});
}
Handlendex（索引）{
设params={
聊天室uid:this.chatUid，
索引:索引,，
角色：“下一步单击”，
业务单位：此。选择的业务单位
};
$.post（“/mock_chat/next”），参数，数据=>{
本建议=数据；
这个是.messages.push({
角色：“系统”，
信息：“下一步：”+索引，
答复：数据。答复，
节点名称：data.node\u名称
});
这是resetAfterMessage（）；
});
}
反向响应（）{
美元邮政(
“/mock_chat/back”，
{
聊天室uid:this.chatUid
},
数据=>{
本建议=数据；
这个是.messages.push({
角色：“系统”，
信息：“返回”，
答复：数据。答复，
节点名称：data.node\u名称
});
这是resetAfterMessage（）；
}
);
}
发送文本（文本）{
让role=“agent”；
让消息=文本；
this.sendMessage（角色、消息）；
}
选择业务单元（事件）{
this.selectedBusinessUnit=event.target.value；
这是.getBusinessUnitData（）；
}
getBusinessUnitData（）{
设params={
业务单位：此。选择的业务单位
};
$.post（“/mock\u chat/get\u business\u unit\u data”），参数，数据=>{
this.dataTopics=data.topics；
this.selectedTopic=data.selected\u主题；
});
}
选择图形（事件）{
this.selectedGraph=event.target.value；
}
}

警告如下：

[Vue warn]：属性或方法“消息”未在实例上定义，但在呈现期间被引用。通过初始化属性，确保此属性在“数据”选项中或对于基于类的组件是被动的

我正在将

消息

数据传递给聊天组件，但它没有识别它

即使在使用data:{}选项声明数据属性时，也会出现此错误

感谢您的帮助。

已解决： 我已经初始化了

消息：any[]带有
消息：任意[]=[]

结果成功了

数据变量应该初始化为某个值，以解决此处声明的其余数据变量的问题

  messages: any[] = [];
  state: object = {};
  recommendation: object = {};
  selectedBusinessUnit: string;
  selectedGraph: string;
  dataTopics: string[];
  selectedTopic: string;
  selectedAgentId: string = "";
  mockview: boolean = true;

决议：
我已经初始化了
消息：any[]带有
消息：任意[]=[]

结果成功了

数据变量应初始化为so