使用vue-preview报错Cannot read property 'open' of undefined

最近在做一个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 [email protected]^1.0.5 -S,问题解决!

使用vue-preview报错Cannot read property 'open' of undefined

原文地址:https://www.cnblogs.com/smalldy/p/11096264.html

时间: 2024-11-05 23:33:55

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

Chrome下使用百度地图报错Cannot read property &#39;minZoom&#39; of undefined

问题:工作中在Google chome下面的js console里面测试百度地图API var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); TypeError: Cannot read property 'minZoom' of undefined message: "Cannot read property 'minZoom' of unde

echarts报错Cannot read property &#39;features&#39; of undefined

引入地图的时候 echarts2报错: Uncaught Error: [MODULE_MISS]"echarts/src/util/mapData/params" is not exists! 原因不明,但是感觉和缺js文件有关(因为echarts3报错就是因为缺少了world.js) echarts3报错: Uncaught TypeError: Cannot read property 'features' of undefined 原因如下:缺少world.js,然后成功: 完

在使用resetField 报错Cannot read property &#39;indexOf&#39; of undefined

elementUI  的resetField  是对对整个表单进行重置,将所有字段值重置为初始值并移除校验结果 ,当内容不一致 或找不到内容时 就会报错,具体原因举例如下: 原因1:ruleForm 内部数据 与实际页面需要验证的数据不一致 比如:下面例子 页面需要的是name ,而 ruleForm定义的是name2,当单词不小心写错就会报这个问题 <el-form ref="newFormModel" :rules="rules" :model="

使用UEditor 报错Cannot read property &#39;nodeType&#39; of undefined 解决办法

报如下错误 解决办法: //对编辑器的操作最好在编辑器ready之后再做 ue.ready(function() { }) <!-- 实例化编辑器 --> <script type="text/javascript"> $(function(){ var ue = UE.getEditor("container",{ autoHeight: false }); /对编辑器的操作最好在编辑器ready之后再做 ue.ready(function

angular ng build 报错 Cannot read property &#39;default&#39; of undefined

95% emitting index-html-webpack-plugin Cannot read property 'default' of undefinedTypeError: Cannot read property 'default' of undefined at compiler.hooks.emit.tapPromise (E:\projects\node_modules\@angular-devkit\build-angular\src\angular-cli-files\p

Vue的报错:Uncaught TypeError: Cannot assign to read only property &#39;exports&#39; of object &#39;#&lt;Object&gt;&#39;

Vue的报错:Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>' 1.运行一下以前的一个Vue+webpack的 vue仿新闻网站  小项目,报错 由于自己vue学习不深入,老是这个报错,找了好久(确切的说是整整一下午^...^)才找到原因 -v- Uncaught TypeError: Cannot assign to read only property 'expor

vue 项目报错,提示:Cannot read property &#39;$createElement&#39; of undefined at render ...

vue 项目报错,提示:Cannot read property '$createElement' of undefined at render ... vue 项目报错,提示:Cannot read property '$createElement' of undefined at render ... 原文地址:https://www.cnblogs.com/sylys/p/11956063.html

dubbo-admin-2.5.3 运行报错: Bean property &#39;URIType&#39; is not writable or has an invalid

因为 jdk 是1.8的版本,和 dubbo-admin 存在兼容性问题.所以报错: Bean property 'URIType' is not writable or has an invalid 参见:https://github.com/alibaba/dubbo/issues/50 解决方法,修改 tomcat 默认的 jdk到 1.7 : 1) 修改bin文件夹下面的catalina.bat文件,把如下内容rem ----- Execute The Requested Command

Vue.js报错Failed to resolve filter问题原因

Vue.js报错Failed to resolve filter问题原因 金刚 vue Vue.js js javascript 之前使用vue.js写分页功能时,写了一个过滤器,发现一个比较奇怪的错误. console控制台调试的时候 提示错误消息: Failed to resolve filter: HomePage console错误信息.jpg 我原来的写法: 原来的错误写法.jpg 错误原因 经过自己的摸索,后来发现竟然是代码顺序错误问题... 由于先执行的pageList,后执行的V