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
}

即可。

 

如果有问题，请给我留言！