时间戳

首页 > 解决方案 > 更改值后无法向左移动

vue.js - 更改值后无法向左移动

问题描述

我刚开始学习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.jsswiper

解决方案

我发现 :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>

推荐阅读