在Vue.data已定义的变量，运行时却找不到变量

报错1：Property or method "xxx" 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. See: 属性或方法“xxxx”未在实例上定义，但在渲染过程中被引用。通过初始化该属性，确保该属性在数据选项中或在基于类的组件中是反应性的。通过初始化属性，可以在data选项中，也可以在基于类的组件中。

报错2：The "data" option should be a function that returns a per-instance value in component definitions.

可以先查看查看官方文档vue2：https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties

问题:没有其他拼写错误，但是已经定义的变量还是在控制台中显示没有定义，个人判断如果当前文件是在组件 (component) 里，data 必须声明为有返回一个初始数据对象的函数

解决方法：将data的定义和其他方法塞到 export default中，data中的变量定义方法要修改一下加一个function

修改前代码：

<script>// 连接服务器ws = new WebSocket('ws://10.10.10.238:9687/msg')// 接收消息ws.onmessage = function (data) {// 将服务器每次发来的消息存放在vue实例中app.messages_list.push(JSON.parse(data.data))}// 实例化一个vue对象var app = new Vue({el: '#app',data: {// 发送给服务器的内容，与发送表单绑定sends: '',// 存放服务器与客户端聊天数据messages_list: []},watch: {// 监听聊天数据，每次有变化将聊天区域滚动条定位到底部messages_list: function (newQuestion, oldQuestion) {var content = document.getElementsByTagName('ul')[0];content.scrollTop = content.scrollHeight;}},methods: {// 发送给服务端消息sendMessage: function () {// 现将要发送的消息存放到聊天数据中心this.messages_list.push({id: 1,user: 'https://pic.qqtn.com/up/2018-2/15175580428030394.gif',msg: this.sends})// 发送给服务器消息ws.send(this.sends)// 发送消息后置空发送消息框this.sends = ''}}})
</script>

修改后

<script>import Vue from 'vue'Vue.config.productionTip = false; //关闭浏览器的生产提示// 连接服务器var ws = new WebSocket('ws://localhost:xxx/xxx')// 当接收到服务器消息时调用export default{data:function(){return{sends: '',messages_list: []};},watch: {// 监听聊天数据，每次有变化将聊天区域滚动条定位到底部messages_list: function (newQuestion, oldQuestion) {var content = document.getElementsByTagName('ul')[0];content.scrollTop = content.scrollHeight;}},methods: {// 发送给服务端消息sendMessage: function () {// 现将要发送的消息存放到聊天数据中心, uesr是头像this.messages_list.push({id: 1,user: 'https://res.wx.qq.com/mmspraiweb_node/dist/static/openaiplugin/img/answerImage.png',msg: this.sends})console.log('this.sends::',this.sends)console.log('this.messages_list::',this.messages_list)// 发送给服务器消息ws.send(this.sends)// 发送消息后置空发送消息框this.sends = ''}},};ws.onmessage = function (event) {// 将服务器每次发来的消息存放在vue实例中console.log(event.data.size);this.messages_list.push(JSON.parse(event.data))console.log('return his.messages_list::',his.messages_list)}
</script>

在Vue.data已定义的变量，运行时却找不到变量相关推荐

方法区元空间实现之jdk7和8字符串常量池、运行时常量池、静态变量到底在哪？
方法区(落地实现jdk7永久代,jdk8元空间),元空间并不在虚拟机中,而是使用本地内存,它和堆在逻辑上是连续的,但在物理上是不连续的,所以也叫非堆. 1.此区域是线程共享的.储存已加载的类型信息.常 ...
用vs打开已有web项目运行时显示网页无法访问
文章目录问题方法问题用vs打开已有web项目运行时显示网页无法访问方法文件管理器点击查看→隐藏的项目√ 删除.vs文件夹,重新启动vs并重新打开项目文件.sln,再次运行即可
KEIL5工程不能编译和下载，运行时提示找不到.axf文件(Error: Flash Download failed - Could not load file“.axf“)
KEIL5工程不能编译和下载,运行时提示找不到.axf文件 KEIL5工程不能编译和下载,运行时提示找不到.axf文件 keil5debug运行时弹出警告在网上找了好多办法都试过,就是不行,最终根据 ...
Vivado2017.4运行时出现找不到VCOMP140.DLL，无法继续的报错
Vivado2017.4运行时出现找不到VCOMP140.DLL,无法继续的报错报错内容如下: 之前运行Vivado2017.4,没有出现过此类情况,上网查询后明白是安装了VC++(我安装的 ...
解决C++ MFC源码运行时由于找不到MFC42D.DLL，无法继续执行代码
大家在从一台PC上拷贝C++源代码到另一台PC上编译时有没有遇到过这种情况由于找不到MFC42D.DLL,无法继续执行代码.重新安装程序可能会解决此问题. 由于找不到MSVCRTD.dll,无法 ...
python / 解决 pyinstaller 打包后运行时提示找不到模块的问题
在打包时候,并没有提示错误,可以顺利打包成 exe 文件.但是在运行打包好的软件时,会提示找不到模块,本人遇到的是找不到第三方模块,例如 requests .这时候需要在打包时指定 -p 参数,后面跟 ...
运行java程序时找不到_基本Java运行时程序找不到python
您设置的$PATH变量不是在Java的执行上下文中继承的.{cdbin>尝试传递Python的执行路径^.在为此,下面的代码首先检索所有环境变量并创建一个ENV_KEY=ENV_VALUE对数 ...
linux运行时命令找不到,linux - 在运行Bash脚本时找不到命令，但是在直接运行命令时有效 - 堆栈内存溢出...
我一直在使用letencrypt为我的网站生成SSL证书,更具体地说是letencrypt_webfaction. 当我在项目中运行此命令时,它可以工作 letsencrypt_webfaction ...
VScode运行时提示找不到应用程序
在用vscode运行一个前端的小程序的时候报了找不到应用程序的错误,如下图所示(一开始忘记截图,此图借用某位网友的,还望谅解): 这个是由于浏览器造成的,可以在控制面板中重新设置一下自己的浏览器, 重 ...

在Vue.data已定义的变量，运行时却找不到变量

在Vue.data已定义的变量，运行时却找不到变量相关推荐

最新文章

热门文章