前端开发：Vue项目报错Property “visible” must be accessed with “$data.visible” …的解决方法

这是我参与更文挑战的第5天，活动详情查看：更文挑战

报错信息

前段时间在开发一个Vue项目的时候，运行项目之后遇到一个综合的报错提示，有9个不同的同款报错，然后具体报错提示如下所示：
`vue.runtime.esm.js?a593:619 [Vue warn]: Property “visible” must be accessed with “$data.visible” because properties starting with “$” or “_” are not proxied in the Vue instance to prevent conflicts with Vue internals. See: vuejs.org/v2/api/#dat…

vue.runtime.esm.js?a593:619 [Vue warn]: Property “type” must be accessed with “$data.type” because properties starting with “$” or “_” are not proxied in the Vue instance to prevent conflicts with Vue internals. See: vuejs.org/v2/api/#dat…

vue.runtime.esm.js?a593:619 [Vue warn]: Property “center” must be accessed with “$data.center” because properties starting with “$” or “_” are not proxied in the Vue instance to prevent conflicts with Vue internals. See: vuejs.org/v2/api/#dat…

vue.runtime.esm.js?a593:619 [Vue warn]: Property “showClose” must be accessed with “$data.showClose” because properties starting with “$” or “_” are not proxied in the Vue instance to prevent conflicts with Vue internals. See: vuejs.org/v2/api/#dat…

vue.runtime.esm.js?a593:619 [Vue warn]: Property “customClass” must be accessed with “$data.customClass” because properties starting with “$” or “_” are not proxied in the Vue instance to prevent conflicts with Vue internals. See: vuejs.org/v2/api/#dat…

vue.runtime.esm.js?a593:619 [Vue warn]: Property “iconClass” must be accessed with “$data.iconClass” because properties starting with “$” or “_” are not proxied in the Vue instance to prevent conflicts with Vue internals. See: vuejs.org/v2/api/#dat…

vue.runtime.esm.js?a593:619 [Vue warn]: Property “dangerouslyUseHTMLString” must be accessed with “$data.dangerouslyUseHTMLString” because properties starting with “$” or “_” are not proxied in the Vue instance to prevent conflicts with Vue internals. See: vuejs.org/v2/api/#dat…

vue.runtime.esm.js?a593:619 [Vue warn]: Property “message” must be accessed with “$data.message” because properties starting with “$” or “_” are not proxied in the Vue instance to prevent conflicts with Vue internals. See: vuejs.org/v2/api/#dat…

vue.runtime.esm.js?a593:619 [Vue warn]: Property “showClose” must be accessed with “$data.showClose” because properties starting with “$” or “_” are not proxied in the Vue instance to prevent conflicts with Vue internals. See: vuejs.org/v2/api/#dat…

分析原因

这么长的错误提示，引起的原因就只有一个，那就是项目中使用的是Element UI消息提示message请求响应拦截器中err处理的报错，具体原因就是message的error方法接收类型是一个string或者是VNode,但是data传的是一个数组，由于数据类型不一致造成的报错。

项目错误的写法如下：

this.$message.error(err || '下载失败，请稍后再试!'); //错误写法，由于message.error()接收类型是string或者是VNode，而现有类型data是数组，所以报错。
复制代码

解决方法有两种，任选一种即可，具体操作如下所示：

//正确方法一：
            this.$message.error({
              type: "error",
              message: err || '下载失败，请稍后再试!',
            });
复制代码

//正确方法二：
             this.$message.error({
                message: err || '下载失败，请稍后再试!'
            });
复制代码

上述错误其实很容易定位，而且遇到同类型的错误提示，差不多都是由传的参数和方法接收的参数类型不匹配造成的，所以在遇到同类型的错误提示可以精准定位，方便快速解决。

以上就是本章全部内容，欢迎关注三掌柜的微信公众号“程序猿by三掌柜”，三掌柜的新浪微博“三掌柜666”，欢迎关注！