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 ...
随机推荐
- android 向webview传值
android中可以使用WebView加载网页,同时Android端的java代码可以与网页上的javascript代码之间相互调用. 效果图: (一)Android部分: 布局代码: <spa ...
- 【网站建设】Linux上安装MySQL - 12条命令搞定MySql
从零开始安装mysql数据库 : 按照该顺序执行 : a. 查看是否安装有mysql:yum list installed mysql*, 如果有先卸载掉, 然后在进行安装; b. 安装mysql客 ...
- 【UML 建模】UML建模语言入门-视图,事物,关系,通用机制
. 作者 :万境绝尘 转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/18964835 . 一. UML视图 1. Ration ...
- MySql常用操作语句(1:启动、连接数据库及用户操作)
下方将个人常用的MySql操作语句(Win7下)总结如下: 1. 启动与关闭数据库 “管理员”权限, MySql安装目录下bin目录//: 1.1 启动 @>net start mysql ...
- Cocoa公历和中国农历直接的转换
看过某书上面的做法是先生成一个公历的calendar,使用的是: NSCalendar *cal = [NSCalendar currentCalendar]; 然后用它生成一个NSDateCompo ...
- mybatis源码之StatementHandler
/** * @author Clinton Begin */ public interface StatementHandler { Statement prepare(Connection conn ...
- 面试之路(8)-BAT面试题之数组和链表的区别
两种数据结构都是线性表,在排序和查找等算法中都有广泛的应用 各自的特点: 数组: 数组是将元素在内存中连续存放,由于每个元素占用内存相同,可以通过下标迅速访问数组中任何元素.但是如果要在数组中增加一个 ...
- IOS中的数据存储方式,特点,使用情况
数据存储的核心都是写文件,主要有四种持久化方式:属性列表(Plist),对象序列化,SQLite数据库,CoreData. 存储Plist: 键值进行存储,不能存储对象.对象需要序列化编码才能写入文件 ...
- 十六进制颜色转换为iOS可以用的UIColor
// // UIColor+Transformation.h // ContactApp // // Created by 袁冬冬 on 15/9/11. // Copyright (c) 2 ...
- package.json字段全解
原文:http://blog.csdn.net/woxueliuyun/article/details/39294375 Name 必须字段. 小提示: 不要在name中包含js, node字样: 这 ...