vue for循环，点击单个dom,其余dom也会随之响应，这个怎么解决，求教

Question

如图：这个列表是v-for循环出来的，我想点击箭头就会展开内容，但是我点击任意一个，其余的都会展开，这个要怎么解决呢，刚接触vue,求指教

<view class="showhide" @click="isshowClick(index)"><image :class="{ rotate: isrotate }" src="../../static/temp/xia.png"></image></view>
export default{

data() {
        return {
            isrotate: true,
            
        };
    },
methods: {
        
    isshowClick(e) {
        this.isrotate = !this.isrotate;
        
    },
}

Answer 1

这个问题很简单啊，只需要记住旋转的那个元素的索引即可。

<view class="showhide" @click="isshowClick(index)"><image :class="{ rotate: index === rotateIndex }" src="../../static/temp/xia.png"></image></view>
export default{

data() {
        return {
            rotateIndex: -1,
            
        };
    },
methods: {
        
    isshowClick(index) {
        this.rotateIndex = index;
        
    },
}

不过这种只能一个元素处于展开状态，想要可以多个独立展开，可以在列表循环的时候做手脚。

<view class="showhide" @click="isshowClick(index)"><image :class="{ rotate: item.isRotate }" src="../../static/temp/xia.png"></image></view>
export default{

data() {
        return {
            list: [{
                text: 'xx',
                isRotate: false,
            }],
            
        };
    },
methods: {
        
    isshowClick(index) {
        this.list[index].isRotate = !this.list[index].isRotate;
        
    },
}