Vue初学跳坑
1. uncaught TypeError: Cannot read property '0' of undefined
<div class="home-module-wrap">
<image-preview :src="modules[0][0]['list'][0]['image']"></image-preview>
<div class="swiper-wrap-info" style="height:346px">
<swiper-container :items="modules[0][1]['list']"></swiper-container>
</div>
</div>
data: {
modules: ""
},
created() {
axios.get('/api/???').then( data => {
this.modules = data.modules
})
}
这分别是我的html代码和js代码,不知道你的代码是否和我相似,解决这个问题的方法是在图一的html中第一行加入v-if="modules"即可。原因是第一次渲染界面的时候module为'',去拿module['0']当然会抛出异常,我们在这之前验证一下就行了。
2. 操作v-for生成的DOM元素
假设你用ajax从后台拿到数据,用v-for展示在前台,现在需要操作v-for生成的第二行的元素你会怎么做?你是否碰到了操作不了的错误。
或者和我的需求一样,从后来拿来几张图片,用js插件Swiper生成一个图片轮播的banner,你会怎么做?你是否碰到了Swiper里只有1到2张图片,而且没有图片的分页,也无法滑动。
解决办法:
<div class="swiper-container banner">
<div class="swiper-wrapper">
<a v-for="banner in banners" :key="banner.id" class="swiper-slide" v-bind:href="banner.link">
<img class="banner-img" :src="banner.image | addDomain" alt="">
</a>
</div>
<div class="swiper-pagination"></div>
</div>
axios.get('/api/???').then( data => {
this.banners = data.banner
this.$nextTick( () =>
new Swiper('.banner', {
autoplay: 3000,
loop: true,
lazyLoading : true,
autoplayDisableOnInteraction: false,
pagination: '.swiper-pagination'
})
)
})
这是我swiper的代码,把swiper的初始话放在数值改变后,this.$nextTick中就行,因为这时banners的值已经改变了
3. Uncaught SyntaxError: Unexpected token import /
Uncaught SyntaxError: Unexpected token export
这是webpack和es6中可能会遇到的问题,出现这个问题是webpack配置的问题
解决办法,首先webpack中关于babel的配置改为
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
}
并在同级目录下增加.babelrc文件,并在这个文件中写入
{
"presets": ["es2015"],
"plugins": ["transform-runtime"],
"comments": false
}
即可。
如果有问题,请给我留言!
Vue初学跳坑的更多相关文章
- vue eventBus 跳坑的办法
前言(feihua): 最近闲来没事写了一个小的demo,在小的数据传输上没有必要去使用vuex,对于非父子组件的传值方法总结了一点心得体会供大家参考(如有太low,还请大神别喷俺) 先上官方文档: ...
- Webpack + VueJS 学习、跳坑和总结
这篇随笔会陆续地更新下去,用于汇集一些关于Webpack的初学跳坑总结还有VueJS的基础知识. Webpack部分 ① 快速建立一个Webpack-Vue项目开发环境(4.39.1-2019/08/ ...
- Vue + TypeScript 踩坑总结
vue 和 TypeScript 结合的情况下,很多写法和我们平时的写法都不太一样,这里总结我项目开发过程中遇到的问题和问题的解决方案 有些问题可能还没解决,欢迎各位大佬给与提点. 另外,使用本文前可 ...
- JavaScript 跳坑指南
JavaScript 跳坑指南 坑0-String replace string的replace方法我们经常用,替换string中的某些字符,语法像这样子 string.replace(subStr/ ...
- Xamarin安装和跳坑指南
安装Checklist 注意:本文只描述安装过程,由于组件的版本更新很快,为保证文章时效性,不提供下载链接,也尽可能不指明具体版本. 安装Visual Studio 2015进行默认安装,除非已经FQ ...
- 【模拟,时针分针秒针两两夹角】【没有跳坑好兴奋】hdu - 5387 (多校#8 1008)
算是最好写的一道题了吧,最近模拟没手感,一次过也是很鸡冻o(* ̄▽ ̄*)o 注意事项都在代码里,没有跳坑也不清楚坑点在哪~ #include<cstdio> #include<cst ...
- 两百条微信小程序跳坑指南(不定时更新)
微信小程序联盟出品 跳坑textarea<二百二十三>不显示文本及textarea相关问题集合跳坑<二百一十三> background-image无法获取本地资源图片....跳 ...
- 基于 Laravel 开发 ThinkSNS+ 中前端的抉择(webpack/Vue)踩坑日记【ThinkSNS+研发日记系列】
在上一篇文章< ThinkSNS+基于Laravel master分支,从1到 0,再到0.1>,简单的介绍了 社群系统ThinkSNS+ ,这里分享在开发过程中,前端选择的心理活动. L ...
- vue router 跳转到新的窗口方法
在CreateSendView2.vue 组件中的方法定义点击事件,vue router 跳转新的窗口通过采用如下的方法可以实现传递参数跳转相应的页面goEditor: function (index ...
随机推荐
- C语言实现的猜数字小游戏(主要是对于自定义函数的运用)
#include <stdio.h> #include <stdlib.h> #include<time.h>//加上此头文件的作用是什么?另外不加的话有什么影响? ...
- 开源视频平台:Kaltura
Kaltura是一个很优秀的开源视频平台.提供了视频的管理系统,视频的在线编辑系统等等一整套完整的系统,功能甚是强大. Kaltura不同于其他诸如Brightcove,Ooyala这样的网络视频平台 ...
- 018-继承-OC笔记
学习目标 1.[掌握]Xcode开发文档 2.[掌握]static关键字 3.[掌握]self关键字 4.[掌握]继承 5.[掌握]NSObject 6.[掌握]访问修饰符 7.[掌握]私有实例变量和 ...
- python +Django 搭建web开发环境初步,显示当前时间
1.python 的安装 网上很多关于django跟python 开发的资料,这块我正在实习准备用这个两个合起来搞一个基于web 的东西出来现在开始学习,写点东西记录一下心得. 开发环境是window ...
- SpriteBuilder切换解决方案以及CCB的修改与保存
在SpriteBuilder中切换解决方案非常简单,可以按cmd+数字键即可. 如上图可以看到数字键1,2,3分别对应于3中不同的解决方案. 注意:当通过在CCB中包含一个Sub File Node的 ...
- nfc近场通信
NFC简介: Near Field Communication 近场通信,是一种数据传输技术. 与wifi.蓝牙.红外线等数据传输技术的一个主要差异就是有效距离一般不能超过4cm. NFC支持3种工作 ...
- android SurfaceView绘制实现原理解析
在Android系统中,有一种特殊的视图,称为SurfaceView,它拥有独立的绘图表面,即它不与其宿主窗口共享同一个绘图表面.由于拥有独立的绘图表面,因此SurfaceView的UI就可以在一个独 ...
- UML类图的简单梳理
依赖关系 Dependency Class Car{} Class Person{ int a; static int b public void buy(Car c){ int c; .... } ...
- obj-c编程10:Foundation库中类的使用(3)[文件管理]
好吧,不管神马系统都无可避免的要说到文件,目录,路径(PATH)管理的内容,下面我们来看看在F库中对他们的支持.我简单看了下,不谈其他光从方法命名来说就多少显得有点复杂,如果和ruby相比就呵呵了. ...
- JVM学习--(七)性能监控工具
前言 工欲善其事必先利其器,性能优化和故障排查在我们大都数人眼里是件比较棘手的事情,一是需要具备一定的原理知识作为基础,二是需要掌握排查问题和解决问题的流程.方法.本文就将介绍利用性能监控工具,帮助开 ...