最近在做一个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. nvGRAPH API参考分析（二）

    nvGRAPH API参考分析(二) nvGRAPH Code Examples 本文提供了简单的示例. 1. nvGRAPH convert topology example void check( ...

  2. postman之内建变量的基础应用

    一.Postman有以下内建变量,适合一次性使用:{{$guid}}//生成GUID{{$timestamp}}//当前时间戳{{$randomInt}}//0-1000的随机整数 简单应用举例: 二 ...

  3. 信息熵，交叉熵与KL散度

    一.信息熵 若一个离散随机变量 \(X\) 的可能取值为 \(X = \{ x_{1}, x_{2},...,x_{n}\}\),且对应的概率为: \[p(x_{i}) = p(X=x_{i}) \] ...

  4. mycat高可用-安全管理-监控 看这一篇就够了

    ​ 在之前的操作中,我们已经实现了mysql机器的高可用,可以动态切换master,那么如果mycat崩溃了呢?我们应该如何处理呢?所以此时就需要搭建mycat的高可用集群了. ​ 在mycat的权威 ...

  5. 用jquery通过点击事件把下拉列表币种的值传给文本框1，再通过文本框1的币种名称用if转化为币别传值给文本框2保存

    <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>& ...

  6. 温故知新，Blazor遇见大写人民币翻译机(ChineseYuanParser)，践行WebAssembly SPA的实践之路

    背景 在之前<温故知新,.Net Core遇见Blazor(FluentUI),属于未来的SPA框架>中我们已经初步了解了Blazor的相关概念,并且根据官方的指引完成了<创建我的第 ...

  7. .net core AES加密解密及RSA 签名验签

    引用 using Org.BouncyCastle.Crypto.Parameters; using Org.BouncyCastle.Security; using System; using Sy ...

  8. rsync 基本使用

    基本参数 # rsync -P test.tar.gz ./ test.tar.gz 395,706,368 48% 377.34MB/s 0:00:01 Or # rsync -avPh test. ...

  9. 31、服务器磁盘、内存、cpu使用率监控

    31.1.监控磁盘: #!/bin/sh diskspace="`df -hT`" IFS="\n" disk_value="80" ech ...

  10. FlowNet：simple / correlation 与 相关联操作

    Flow Net : simple / correlation 与 相关联操作 ​ 上一篇文章中(还没来得及写),已经简单的讲解了光流是什么以及光流是如何求得的.同时介绍了几个光流领域的经典传统算法. ...