vue 两个按钮触发条件相同，怎么点击一个按钮，只在按钮本身添加类名，另一个不变

Question

问题描述

两个控制全选的按钮（全选5，全选4），只有点击了才添加on类名，因为代码里绑定的事件都相同，所以点击之后两个按钮都添加了类名

问题出现的环境背景及自己尝试过哪些方法

尝试用不同的index，只有当它等于index才添加类，但是后面不好控制，需要点击别的项目，全选按钮的on去掉

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
<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;
            }
        }            
    }
})

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

vue的思路是视图变化基于数据变更，比如你可以根据data.num来决定class应该怎么选。
此外那一大堆dom操作是什么鬼。