vue.js如何判断多次点击时是否为同一个元素

Question

默认的样式

当我点击时，

，

再次点击时

我本来的思路是，判断里面的如果arrowUp如果不为空，说明被点击过，说明点击的就不是同一个元素，然后将数据初始化，后来发现，vue数据的双向绑定，其实这步初始化是无用的。求大神指教

                for(var i = 0; i < this.arrowArray.length; i++) {
                     if(i != this.arrowArray[index].index && this.arrowArray[index].arrowUp != '') {
                         this.arrowArray = [
                             {index:0,arrowUp:'',arrowDown:true},
                             {index:1,arrowUp:'',arrowDown:true},
                             {index:2,arrowUp:'',arrowDown:true},
                             {index:3,arrowUp:'',arrowDown:true},
                             {index:4,arrowUp:'',arrowDown:true},
                             {index:5,arrowUp:'',arrowDown:true},
                             {index:6,arrowUp:'',arrowDown:true},
                             {index:7,arrowUp:'',arrowDown:true},    
                         ];
                     }
                 }
                 
                 this.arrowArray[index].arrowUp = !this.arrowArray[index].arrowDown;
                 this.arrowArray[index].arrowDown = !this.arrowArray[index].arrowDown;

这是其他部分的逻辑：
sortIndex有很多值

<div class="specific" :class="{ selected : sortIndex == 4 }" @click.stop="toggleSort(4)">
    人流量/价格&nbsp;<span :class="{'arrow-down' : !arrowArray[4].arrowUp, 'arrow-up' : sortIndex == 4 && arrowArray[4].arrowUp}"></span>
</div>

toggleSort: function(index) {
                 this.sortIndex = index;
                 
                 for(var i = 0; i < this.arrowArray.length; i++) {
                     if(i != this.arrowArray[index].index && this.arrowArray[index].arrowUp != '') {
                         this.arrowArray = [
                             {index:0,arrowUp:'',arrowDown:true},
                             {index:1,arrowUp:'',arrowDown:true},
                             {index:2,arrowUp:'',arrowDown:true},
                             {index:3,arrowUp:'',arrowDown:true},
                             {index:4,arrowUp:'',arrowDown:true},
                             {index:5,arrowUp:'',arrowDown:true},
                             {index:6,arrowUp:'',arrowDown:true},
                             {index:7,arrowUp:'',arrowDown:true},    
                         ];
                     }
                 }


                 this.arrowArray[index].arrowUp = !this.arrowArray[index].arrowDown;
                this.arrowArray[index].arrowDown = !this.arrowArray[index].arrowDown;
             },

Answer 1

看起来现在有两个逻辑
1.首次点击时改变css（这里可以通过active name增删样式）
2.反复点击改变箭头方向（绑定一个值，true or false来决定箭头方向）
——
刚才再看了一下才发现是我想岔了，原来首次点击是不改变箭头方向的

<div v-for="(item,key) in list">
    <div @click="isChangeArrow(key)" :class="[currentIndex == key ? 'changColor' : '']">
        <span>{{item.name}}</span>
        <icon v-if="item.isDown">↑</icon>
        <icon v-else>↓</icon>
    </div>
</div>

这里加个方法

data(){
    return{
        lastIndex: '',
        currentIndex: '',
        list: [{
            name: '房价',
            idDown: false
        },{
            name: '房价',
            idDown: false
        }]
    }
},
methods: {
    isChangeArrow(index){
        //是否首次点击
        //是 => 改变currentIndex => 改变color => 上一次点击还原
        //否 => 改变箭头方向
        this.currentIndex = index;//为了控制color
        if(this.lastIndex && this.lastIndex !== index){
            //首次点击
            this.list[this.lastIndex].isDown = false;//上一次点击还原
        }else if(this.lastIndex == index){
            //二次点击以上
            this.handleClike(index)
        }
        this.lastIndex = index;
    },
    handleClike(index){
        this.list[index].isDown = !this.list[index].isDown;
    }
}

不知道有没有理解错

Answer 2

把arrowUp和arrowDown合并为一个值，反正这两个值不是true就是false。
然后记录下当前选中的index,我把它命名为currentIndex。在点击事件中判断当前点击的跟记录的currentIndex 是不是一样，若是一样的就将当前的arrowDown赋相反的值 否则赋默认值

methods:{
    click(index){
        if(this.currentIndex === index){
            this.arrowArray[index].arrowDown = !this.arrowArray[index].arrowDown;
        }else{
            this.arrowArray[index].arrowDown = false;//赋值默认
        }
        this.currentIndex = index;
    }
}