• 使用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 vue-preview@^1.0.5 -S,问题解决!
     
  • 相关阅读:
    Ubuntu终端Terminal常用快捷键
    继承(一)
    c语言中动态数组的建立
    指针的一些小的知识点
    什么是内存地址
    组合(composition)与继承(inheritance)
    重载new和delete
    不要轻易delete void*指针,这样会隐藏比较多的错误。
    内存管理运算符new delete与内存管理函数malloc free的区别——已经他们对对象创建的过程。
    自动类型转换之全局重载运算符与成员重载运算符
  • 原文地址:https://www.cnblogs.com/smalldy/p/11096264.html
Copyright © 2020-2023  润新知