swiper动态渲染数据无法左右滑动（vue）

这个问题，真的，找了好久解决方案，终于解决成功了，

首先问题描述，
本来是用的静态数据，swiper渲染没有问题，

items: [
                   {url: '111',name:'name1'},
                   {url: '222',name:'name2'},
                   {url: '333',name:'name3'},
                   {url: '444',name:'name4'},
                   {url: '555',name:'name5'},
                   {url: '666',name:'name6'},
                   {url: '777',name:'name7'},
                   {url: '888',name:'name8'},
                   {url: '999',name:'name9'},
                   {url: '000',name:'name10'}

              ],

后期，动态获取数据：

getDeviceList () {      
    getList({}).then((res) => {                           // 获取所有设备
        this.items = res.data;                              
    }).catch((err) => {
        console.error(err);
              });
 },
const itemsLength = this.items.length;
for (let i = 0; i < itemsLength; i += 4) {         //四画面轮播
        this.pages.push(this.items.slice(i, i + 4));
}

发现this.pages始终获取不到this.items的值，swiper渲染不到任何数据，
后来经同事指导，同事说因为数据请求时异步，因此，for循环应该放在getList方法体中：

    getDeviceList () {
        getList({}).then((res) => {                           // 获取所有设备
            this.items = res.data;
            const itemsLength = this.items.length;
            for (let i = 0; i < itemsLength; i += 4) {         //四画面轮播
                this.pages.push(this.items.slice(i, i + 4));
            }           
        ).catch((err) => {
            console.error(err);
    });
  },

这样之后swiper可以渲染数据了，但是我又发现，画面不轮播了，并且也拖不动，四处寻找答案，大致分以下两种方法：
1.在获取数据之后立即对swiper初始化：

  getDeviceList () {
      getList({}).then((res) => {                           // 获取所有设备
          this.items = res.data;
          const itemsLength = this.items.length;
          for (let i = 0; i < itemsLength; i += 4) {         //四画面轮播
              this.pages.push(this.items.slice(i, i + 4));
          }
          let mySwiper = new Swiper('.swiper-container', {
                  autoplay: {
                      delay: 5000,      // 5秒切换一次
                  },
                  loop: true,    //循环
                  allowTouchMove: false, // 不允许鼠标拖动
                  preventClicks: false,//默认true               
              });
              }).catch((err) => {
                  console.error(err);
              });
          },

2.在初始化swiper的时候加上以下两行代码：

let mySwiper = new Swiper('.swiper-container', {                
     observer:true,//修改swiper自己或子元素时，自动初始化swiper
    observeParents:true,//修改swiper的父元素时，自动初始化swiper

});

亲测，第一种方法反正还是不可以滑动，第二种方法可以滑动，但是切换的时候第一条数据不显示，不知道为什么，
后来参考这个博客完美解决：

https://blog.csdn.net/zhanghuiqi205/article/details/79662586

贴上代码：

methods: {

            carousel () {                                             // swiper
                let mySwiper = new Swiper('.swiper-container', {
                    autoplay: {
                        delay: 5000,      // 5秒切换一次
                    },
                    loop: true,    //循环
                    allowTouchMove: false, // 不允许鼠标拖动
                    preventClicks: false,//默认true
                    autoplayDisableOnInteraction: false,                    
                });
                //鼠标覆盖停止自动切换
                mySwiper.el.onmouseover = function () {
                    mySwiper.autoplay.stop();
                };
                //鼠标移开开始自动切换
                mySwiper.el.onmouseout = function () {
                    mySwiper.autoplay.start();
                };
            },

            getDeviceList () {
                let that = this;
                getList({}).then((res) => {                           // 获取所有设备
                    this.items = res.data;
                    const itemsLength = this.items.length;
                    for (let i = 0; i < itemsLength; i += 4) {         //四画面轮播
                        this.pages.push(this.items.slice(i, i + 4));
                    }
                    that.$nextTick(function () {
                        that.carousel();
                    })

                }).catch((err) => {
                    console.error(err);
                });
            }
}

    mounted () {
            this.$nextTick(function () {
                this.getDeviceList();
                this.carousel();
            })
        }

刚刚接触vue，对$nextTick()函数还不了解，日后补上。