最近在做一个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. CodeGen结构循环回路

    CodeGen结构循环回路 structure循环是一个模板文件构造,它允许您迭代CodeGen拥有的有关结构的集合.为了使用结构循环,必须同时基于多个存储库结构生成代码. CodeGen可以通过以下 ...

  2. 快手推荐系统及 Redis 升级存储

    快手推荐系统及 Redis 升级存储  借傲腾 补上 DRAM 短板 内容简介: 作为短视频领域的领先企业,快手需要不断导入更先进的技术手段来调整和优化其系统架构,以应对用户量和短视频作品数量的爆炸式 ...

  3. VB 老旧版本维护系列---迷之集合- ArrayList

    迷之集合- ArrayList '定义一个字符串 Dim dataType_ImageStr As String = "2023,2091,2092,2096,2212" '将字符 ...

  4. Python_selenium页面元素整合设计经验

  5. springMVC源码解读笔记

    1: DispatcherServlet 的初始化流程(调用的init方法) a) 初始化spring高级容器,WebApplicationContext(容器初始化12个步骤) Servlet类的i ...

  6. Java学习——强调一下编程风格

    讲完了Java的基础语法,大家就可以编写简单的程序代码了,这里有必要强调一下编程风格. 代码风格虽然不影响程序的运行,但对程序的可读性却非常重要.自己编写的程序要让别人看懂,首先在排版方面要非常注意. ...

  7. Winform中只运行运行一个实例的方法

    在Program类的main方法按如下代码编写即可 1 static void Main() 2 { 3 if (Process.GetProcessesByName(Process.GetCurre ...

  8. 机器人路径规划其一 Dijkstra Algorithm【附动态图源码】

    首先要说明的是,机器人路径规划与轨迹规划属于两个不同的概念,一般而言,轨迹规划针对的对象为机器人末端坐标系或者某个关节的位置速度加速度在时域的规划,常用的方法为多项式样条插值,梯形轨迹等等,而路径规划 ...

  9. 液晶显示系列(2)之黑色背景的PPT更省电环保吗?常黑与常白型LCD

    原文地址点击这里: 数年前听过一个培训师讲课,他的电脑课件PPT背景颜色是黑色的?美其名曰:黑色省电环保!当时讲台下听课的那些菜鸟们(也包括区区在下)深以为然,不由得心中竖起大拇指:这老师有水平,境界 ...

  10. Basic remains java入门题

    Basic remains input:   b p m    读入p进制的p,m,   求p%m   ,以b进制输出 1 import java.util.*; 2 import java.math ...