vue 兩個按鈕觸發(fā)條件相同，怎么點擊一個按鈕，只在按鈕本身添加類名，另一個不變

問題描述

兩個控制全選的按鈕（全選5，全選4），只有點擊了才添加on類名，因為代碼里綁定的事件都相同，所以點擊之后兩個按鈕都添加了類名

問題出現(xiàn)的環(huán)境背景及自己嘗試過哪些方法

嘗試用不同的index，只有當(dāng)它等于index才添加類，但是后面不好控制，需要點擊別的項目，全選按鈕的on去掉

相關(guān)代碼

// 請把代碼文本粘貼到下方（請勿用圖片代替代碼）
<button @click="checkAllClick(5)" :class="{on: clicked}">全選5分</button>
<button @click="checkAllClick(4)" :class="{on: clicked}">全選4分</button>

new Vue({

    el: '#app',
    data: {
        clicked: false,
        inputArr: []
    },
    mounted: function(){
        var inputArray = document.querySelectorAll('.check-div input');
        this.inputArr = inputArray;
    },
    methods: {
        checkAllClick: function(num) {
            if(this.clicked) return;
            this.clicked = true;
            for (var i = 0; i < this.inputArr.length; i++) {
                var text = this.inputArr[i].nextSibling.nextSibling.innerText;
                if (text == num) {
                    this.inputArr[i].checked = true;
                }
            }
        },
        radioChangeClick: function() {
            if(this.clicked){
                this.clicked = false;
            }
        }            
    }
})

你期待的結(jié)果是什么？實際看到的錯誤信息又是什么？