最近在做一个vue项目中时，需要使用vue-preview插件制作缩略图，首先在终端使用npm i vue-preview -S指令安装了vue-preview插件，然后在main.js中，导入并引用：

import VuePreview from 'vue-preview'

Vue.use(VuePreview)

接着在需要用到vue-preview插件的组件中写入：
<img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)" :key="item.src">
运行npm run dev后，能够获得缩略图效果，但是在点击图片时预览失败，控制台错误提示：Cannot read property 'open' of undefined
根据错误提示，意思是不能读取未定义的open属性，但是这里使用open是插件的模板中的啊，应该是插件自带的方法，所以我怀疑是自己插件安装或引用错误，然后检查了一遍，再次运行，还是报同样的错误，故而开始在百度上搜索，不幸的是，在百度上并没有搜到这个错误的解决方法，但幸运的是，搜索到了关于“使用vue-preview插件实现缩略图时报错：$preview is not defined”这个错误的分析，“$preview is not defined”错误的原因是因为vue-preview插件的使用方法已经更新了，要根据不同版本的vue-preview使用对应的模板。我恍然大悟，立刻到GitHub中查询了一下最新的vue-preview，果然使用方法已经更新。
此时问题已经明朗了，在项目中我安装的是最新版本的vue-preview，但是使用模板却是以前的，所以，解决方案无非降级法和升级法。
这里，我使用的是降级的方案，卸载最新版本的vue-preview，重新安装指定版本：npm i vue-preview@^1.0.5 -S，问题解决！
 

使用vue-preview报错Cannot read property 'open' of undefined的更多相关文章

  1. vue.config.js报错cannot set property "preserveWhitespace" of undefined

    vue.config.js报错cannot set property "preserveWhitespace" of undefined 最近在项目中配置webpack,由于vue ...

  2. 小程序 for循环 报错 Cannot read property 'total' of undefined

    for循环一直报错  Cannot read property 'total' of undefined,但total在起初是有定义的,后来找到了问题,是i<=的问题,改为<不报错了. i ...

  3. datatables 多一列报错Cannot read property 'sWidth' of undefined(…)/少一列报错Cannot read property 'style' of undefined(…)

    datatables 多一列报错Cannot read property 'sWidth' of undefined(…)/少一列报错Cannot read property 'style' of u ...

  4. vue项目中使用echarts map报错Cannot read property 'push' of undefined nanhai.js

    在vue中绘制地图需要加载一个本地china.json文件,我用的是get请求的方法加载的,而不是直接import,因为我怕import请求到的部署到线上的时候会有问题.如下是get请求方法: thi ...

  5. Vue tools开发工具报错Cannot read property '__VUE_DEVTOOLS_UID__' of undefined

    使用 vue tools 开发工具,不显示调试面板中的组件,点击控制台报错: Cannot read property 'VUE_DEVTOOLS_UID' of undefined 在 main.j ...

  6. vue 报错 Cannot read property '__ob__' of undefined的解决方法

    记不清第n次遇到这个错误了,但是脑子就是不好用,记不住解决办法啊,每次都要找好久才能找到错误,网上还一篇篇的全是错误答案......所以写篇随笔,记录下,方便大家也方便我自己. 网上有人说是组件循环了 ...

  7. Vue报错Cannot read property 'split' of undefined

    今天在项目中处理后端返回的字符串需要使用split做一个字符串转数组的处理,之前项目都运行得好好的,今天突然出问题了,然后面向百度编程了一波,如果你也是用的异步向后端发送请求,可能你的问题和我一样,继 ...

  8. [Element-UI] 使用Element-UI的DateTimePicker组件报错:Cannot read property 'getHours' of undefined

    使用Element-UI组件的DateTimePicker,如下: <template> <div class="block"> <span clas ...

  9. echarts报错Cannot read property 'features' of undefined

    引入地图的时候 echarts2报错: Uncaught Error: [MODULE_MISS]"echarts/src/util/mapData/params" is not ...

随机推荐

  1. Python爬虫入门：Urllib parse库使用详解(二)

    文字转载:https://www.jianshu.com/p/e4a9e64082ef,转载内容仅供学习 如有侵权,请联系删除 获取url参数 urlparse 和 parse_qs ParseRes ...

  2. 给小米路由R1D增加WebDAV服务

    我的R1D是14年买的,原装的硬盘已经不能用了,换了一块从笔记本上退役下来的500G硬盘后继续愉快的使用了-- 当初买这款路由器的原因之一是看中了它的内置硬盘,可以用来备份手机相册.存储智能摄像机录像 ...

  3. 2、java基础语法（上）：变量与运算符

    关键字与保留字 关键字 定义:被Java语言赋予了特殊含义,用做专门用途的字符串(单词) 特点:关键字中所有字母都为小写 官方地址:https://docs.oracle.com/javase/tut ...

  4. NX二次开发-曲线或边分析函数

    UF_EVAL_is_arc   判断是圆形曲线或边UF_EVAL_ask_arc 圆形曲线或边分析,得到曲线或边的信息 类似的函数还有以下这些: UF_EVAL_is_ellipse // 椭圆UF ...

  5. 设置NX欢迎界面

    环境变量 变量名:UGII_WELCOME_PAGE 变量值:http://www.baidu.com/

  6. Servlet--核心内容汇总

    Servlet汇总 因为看公司代码,有个cookie+jwt.Token登录验证接口,于是回顾下servlet.cookie.session.前后端分离restful.jwt.token相关内容.虽然 ...

  7. 我试了试用 SQL查 Linux日志，好用到飞起

    大家好,我是小富~ 最近发现点好玩的工具,迫不及待的想跟大家分享一下. 大家平时都怎么查Linux日志呢? 像我平时会用tail.head.cat.sed.more.less这些经典系统命令,或者aw ...

  8. 『无为则无心』Python基础 — 4、Python代码常用调试工具

    目录 1.Python的交互模式 2.IDLE工具使用说明 3.Sublime3工具的安装与配置 (1)Sublime3的安装 (2)Sublime3的配置 4.使用Sublime编写并调试Pytho ...

  9. [Azure DevOps] 如何使用任务组

    1. 使用 PowerShell 脚本 在上一篇文章中我们学会了怎么使用扩展在编译前实时更改版本号.有些情况下我们希望不适用扩展,例如喜欢发明轮子,或者根本没有安装扩展的权限.这时候我们可以自己写 P ...

  10. Golang通过结构体解析和封装XML

    Golang解析和封装XML 解析XML成结构体Demo package main import ( "encoding/xml" "fmt" ) //我们通过 ...