写点什么

前端开发:Vue 项目报错 [Vue warn]:Property "visible" must be accessed with "$data.visible" because…问题解决方法

用户头像
三掌柜
关注
发布于: 2021 年 03 月 14 日
前端开发:Vue项目报错[Vue warn]:Property "visible" must be accessed with "$data.visible" because…问题解决方法

前几天在开发项目的时候遇到一个报错提示,然后具体报错提示如下所示:


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: https://vuejs.org/v2/api/#data


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: https://vuejs.org/v2/api/#data


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: https://vuejs.org/v2/api/#data


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: https://vuejs.org/v2/api/#data


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: https://vuejs.org/v2/api/#data


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: https://vuejs.org/v2/api/#data


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: https://vuejs.org/v2/api/#data


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: https://vuejs.org/v2/api/#data


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: https://vuejs.org/v2/api/#data


这么长的错误提示,引起的原因就只有一个,那就是项目中使用的是 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”,欢迎关注!

三掌柜的微信公众号:


三掌柜的新浪微博:


发布于: 2021 年 03 月 14 日阅读数: 10
用户头像

三掌柜

关注

某某某技术有限责任公司架构师 2021.02.05 加入

一分耕耘,不一定有一分收获,但十分耕耘,一定会有一分收获!

评论 (1 条评论)

发布
用户头像
3月日更打卡第七天
2021 年 03 月 14 日 19:12
回复
没有更多了
前端开发:Vue项目报错[Vue warn]:Property "visible" must be accessed with "$data.visible" because…问题解决方法