更改值后无法向左移动

Question

我刚开始学习 Vue。

使用刷卡后

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

预计不错，可以正常执行

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

滑动器将无法向左移动，但可以向右移动。

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

swiper可以正常左右移动，但是pagination不能正常执行

我做错了什么？

<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>

Answer 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>

更改值后无法向左移动

Cannot move to the left after changing the value

vue.js

swiper