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
}
即可。
如果有问题，请给我留言！