最近在做一个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. MindSpore基本原理

    MindSpore基本原理 MindSpore介绍 自动微分 自动并行 安装 pip方式安装 源码编译方式安装 Docker镜像 快速入门 文档 MindSpore介绍 MindSpore是一种适用于 ...

  2. h265player开发

    h265player开发 https://github.com/goldvideo/h265player 简介 随着视频编码技术的发展,相比H.264, H.265同等画质体积仅为一半.带宽占用省一半 ...

  3. 七、SSL加密网站(待解决)

    keytool -genkeypair -alias tomcat -keyalg RSA -keystore /usr/local/tomcat/keystore  //创建私钥和证书文件提示输入密 ...

  4. Spring Boot WebFlux-08——WebFlux 中 WebSocket 实现通信

    第08课:WebFlux 中 WebSocket 实现通信 前言 WebFlux 该模块中包含了对反应式 HTTP.服务器推送事件和 WebSocket 的客户端和服务器端的支持.这里我们简单实践下 ...

  5. Ajax(内含json)认识

    Ajax 认识 一.概念 1.Ajax 即"Asynchronous Javascript And XML"(英[eɪˈsɪŋkrənəs]异步 JavaScript 和 XML) ...

  6. Linux环境下安装配置vsftpd服务(三种认证模式)

    一.FTP简介 文件传输协议(英文:File Transfer Protocol,缩写:FTP)是用于在网络上进行文件传输的一套标准协议.它工作于网络传输协议的应用层,使用客户/服务器模式,主要是用来 ...

  7. 《MySQL面试小抄》索引考点二面总结

    <MySQL面试小抄>索引考点二面总结 我是肥哥,一名不专业的面试官! 我是囧囧,一名积极找工作的小菜鸟! 囧囧表示:小白面试最怕的就是面试官问的知识点太笼统,自己无法快速定位到关键问题点 ...

  8. 什么IP欺骗?

    1.什么是IP欺骗? IP欺骗是指创建源地址经过修改的Internet协议(IP) 数据包,目的要么是隐藏发送方的身份,要么是冒充其他计算机系统,或者两者兼具.恶意用户往往采用这项技术对目标设备或周边 ...

  9. Linux-ELK日志收集

    1.ELK简介 ELK是三个开源软件的缩写,分别表示:Elasticsearch , Logstash, Kibana , 它们都是开源软件.新增了一个FileBeat,它是一个轻量级的日志收集处理工 ...

  10. hive学习笔记之九:基础UDF

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...