vue-awesome-swiper内容全堆在一起了

Question

1,2，3,4为什么都堆在一起了，还是竖直排列的，好像四个组成了一个slide，不应该是4个slide吗

代码如下：

<template>
<div class="lasted-books">

<div class="content">
  <div class="lasted-list">
    <div class="list-title">
      <p class="title-text">最新上架</p>
    </div>
    <swiper :options="swiperOptionIn" class="swiper-position">
      <swiper-slide v-for="item in bookList">
          {{ item.id }}
      </swiper-slide>
      <div class="swiper-pagination-white swiper-pagination-position" slot="pagination"></div>
    </swiper>
  </div>
</div>

</div>
</template>

<script type="text/ecmascript-6">
import {swiper, swiperSlide} from 'vue-awesome-swiper'
import { mapGetters } from 'vuex'
export default {

components: {
  swiper,
  swiperSlide
},
data () {
  return {
    swiperOptionIn: {
      slidesPerView: 3,
      slidesPerColumn: 1,
      pagination: '.swiper-pagination-white',
      paginationClickable: true,
      observer:true,
      observeParents:true,
      spaceBetween: 30,
    }
  }
},
computed: {
  ...mapGetters({
    bookList: 'books'
  })
}

}
</script>

<style scoped lang="less" rel="stylesheet/less">
.lasted-books {

margin-top: 50px;
.loading {
  color: #999;
  width: 100%;
  height: 150px;
  line-height: 150px;
  text-align: center;
}
.content {
  .lasted-list {
    background: #fff;
    margin-top: 10px;
    box-shadow: 0 0 10px #DDD;
    .list-title {
      height: 50px;
      text-align: center;
      line-height: 50px;
    }
      .swiper-position {
        position: relative;
        cursor: pointer;

          .list-img {
            position: relative;
            img {
              width: 100%;
              display: block;
            }
          }
          .list-info {
            padding: 0 5px;
            font-weight: 300;
            font-size: 14px;
            margin-bottom: 10px;
            .book-name {
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
            }
            .book-author {
              color: #777777
            }
          }

      }
      .swiper-pagination-position {
        position: absolute;
        z-index: 1;
        display: flex;
        flex-direction: row;
        justify-content: center;
      }
  }
}

}
</style>

效果如下：

Answer 1

以前用2.5.4的版本的时候就可以， 现在2.6.2的我的和你出现的情况一样， 所以我改回2.5.4的就可以了.............

Answer 2

多看看github的issue，能解决很多问题。