Vue2实现轮播图@click事件下图片仅切换一次的问题

代码存在4处直接导致功能失效的错误：

• 语法错误：slides数组定义结束后缺失闭合方括号]，JS解析直接中断，后续Vue初始化逻辑根本不会执行
• 依赖缺失：HTML中未引入Vue 2库文件，直接执行new Vue()会直接抛出Vue is not defined报错
• 方法逻辑错误/缺失：下一张按钮绑定的next方法完全未定义，点击直接抛错；上一张prev方法里写的currentIndex++是下一张的递增逻辑，和上一张功能完全相反
• 无效冗余代码：prev方法内的this.allSlides[this.currentIndex].image;是无任何赋值、调用逻辑的孤立表达式，执行后不产生任何效果

所有代码完全基于Vue 2语法实现，兼容2.x全版本

HTML部分 #

必须先引入Vue 2库文件再加载自己的业务脚本，可将Vue 2源码下载到本地js目录，用相对路径引入，保证加载顺序即可。

<!-- 引入本地Vue 2文件示例：<script src="js/vue.js"></script> -->
<div id="app">
    <div class="container" >
        <div class="slider-wrapper" tabindex="0">
            <div class="item">
                <img :src='allSlides[currentIndex].image' alt="Svezia" />
                <div class="text">
                    <h3>{{allSlides[currentIndex].title}}</h3>
                    <p>{{allSlides[currentIndex].text}}</p>
                </div>
            </div>
            <div class="thumbs">
                <div class="prev" @click="prev"></div>
                <div class="next" @click="next"></div>
                <div v-for="slide in allSlides" class="thumb">
                    <img :src="slide.image" :alt="slide.title"/>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="js/script.js"></script>

JS部分（js/script.js） #

const slides = [
    {
        image: 'img/01.jpg',
        title: 'Sweden',
        text: 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et temporibus voluptatum suscipit tempore aliquid deleniti aut veniam inventore eligendi ex ad ullam, cumque provident totam omnis, magnam dolores dolorum corporis.',
    },
    {
        image: 'img/02.jpg',
        title: 'Switzerland',
        text: 'Lorem ipsum.',
    },
    {
        image: 'img/03.jpg',
        title: 'Britain',
        text: 'Lorem ipsum, dolor sit amet consectetur adipisicing elit.',
    },
    {
        image: 'img/04.jpg',
        title: 'Germany',
        text: 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et temporibus voluptatum suscipit tempore aliquid deleniti aut veniam inventore eligendi ex ad ullam.',
    },
    {
        image: 'img/05.jpg',
        title: 'Paradise',
        text: 'Et temporibus voluptatum suscipit tempore aliquid deleniti aut veniam inventore eligendi ex ad ullam, cumque provident totam omnis.',
    }
] // 补全之前缺失的数组闭合括号

new Vue ({
    el: "#app",
    data: {
        allSlides: slides,
        currentIndex: 0
    },
    methods: {
        prev() {
            // 上一张索引递减
            this.currentIndex--
            // 到第一张之后再点，跳转到最后一张
            if (this.currentIndex < 0) {
                this.currentIndex = this.allSlides.length - 1
            }
        },
        next() {
            // 下一张索引递增
            this.currentIndex++
            // 到最后一张之后再点，回到第一张
            if (this.currentIndex === this.allSlides.length) {
                this.currentIndex = 0
            }
        }
    }
})

• Vue 2自带响应式监听，只要currentIndex值更新，模板里所有绑定了该索引的内容（主图地址、标题、描述）都会自动重新渲染，不需要手动操作DOM或者修改img的src属性
• 边界逻辑做了循环处理，点击按钮时会在5张幻灯片之间无限循环切换，不会出现索引越界的问题
• 删掉了原代码里没用的state: "active"冗余字段，不影响功能

内容的提问来源于stack exchange，提问作者Alessio