更改值后无法向左移动答案

【问题标题】：Cannot move to the left after changing the value更改值后无法向左移动
【发布时间】：2021-07-02 16:11:36
【问题描述】：

我刚开始学习 Vue。

在我使用 swiper 之后

当 vm.list = [1, 2, 3]

预期不错，可以正常执行

但是当 vm.list = [1, 2, 3, 4]

Swiper 不能向左移动，但可以向右移动。

然后我设置 vm.list = [1, 2, 3]

Swiper可以正常左右移动，但分页不会正常执行。

我做错了什么？

<head>
    <script src="../vue.js"></script>
    <link rel="stylesheet" href="../static/css/swiper.css">
    <script src="../static/js/swiper.js"></script>
</head>
<body>
<div id="box">
    <div class="swiper-container a">
        <div class="swiper-wrapper" :key="list.length">
            <div class="swiper-slide" v-for="(data, index) in list" v-swipe="{
                'index': index,
                'length': list.length
            }">
                {{ data }}
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
</div>
<script type="text/javascript">
    Vue.directive('swipe', {
        inserted(el, bind) {
            if (bind.value['index'] === bind.value['length'] - 1) {
                new Swiper('.a', {
                    loop: true,
                    pagination: {
                        el: '.swiper-pagination',
                    }
                })
            }
        }
    })
    const vm = new Vue({
        el: '#box',
        data: {
            'list': []
        },
        mounted() {
            setTimeout(() => {
                this.list = ['111', '222', '333']
            }, 2000)
        }
    })
</script>
</body>

【问题讨论】：

标签： vue.js swiper

【解决方案1】：

我发现 :key 放错地方了。

<div id="box">
    <div class="swiper-container a">
        <div class="swiper-wrapper" :key="list.length">
            <div class="swiper-slide" v-for="(data, index) in list" v-swipe="{
                'index': index,
                'length': list.length
            }">
                {{ data }}
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
</div>

改为

<div id="box">
    <div class="swiper-container a" :key="list.length">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(data, index) in list" v-swipe="{
                'index': index,
                'length': list.length
            }">
                {{ data }}
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
</div>

【讨论】：