如何在全局点击事件中切换选定的类？

Question

I'm creating my component library in vue, and I defined my component checkbox , the code is like this:

<template>
    <div class="checkboxcont" :class="{'checkboxcont-selected': isSelected}" @click="clickevent">
        <span class="j-checkbox">
            <input type="checkbox" />
        </span>
        <slot></slot>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                isSelected: false
            }
        },
        methods: {
            clickevent(event) {
                if(this.isSelected) {
                    this.isSelected = false;
                } else {
                    this.isSelected = true;
                }
            }
        },
    }
</script>

Now, I hope that when I click the checkbox to set the data "isSelected" false, I can give the component class "checkboxcont-selected-last" , and when I click other checkbox component, the classname "checkboxcont-selected-last" can be removed, how can I listen my click event to finish it? I try to use native JavaScript code to add the classname of the dom, but it seemed to have nothing when I binded the classname of my component with Vue.js:

clickevent(event) {
    if(this.isSelected) {
        this.isSelected = false;
        this.$el.classList.add("checkboxcont-selected-last");
    } else {
        this.isSelected = true;
    }
}

What should I do to solve this problem, please?

Here is my style code using less:

<style lang="less" scoped rel="stylesheet/less">
    @import '../../mixin/mixin.less';
    .checkboxcont {
        display: inline-block;
        &:hover {
            cursor: pointer;
            .j-checkbox {
                border-color: @jbluelight;
            }
        }
    }
    .j-checkbox {
        position: relative;
        top: 0;
        left: 0;
        width: 12px;
        height: 12px;
        display: inline-block;
        border: 1px solid @border;
        border-radius: 3px;
        line-height: 12px;
        vertical-align: -3px;
        margin: 0 5px;
        z-index: 20;
        transition: all .2s linear;
        input {
            opacity: 0;
            position: absolute;
            left: 0;
            top: 0;
            visibility: hidden;
            /*display: none;*/
        }
    }
    .checkboxcont-selected {
        .j-checkbox {
            background: @jbluelight;
            border-color: @jbluelight;
            &:after {
                content: '';
                width: 4px;
                height: 7px;
                border: 2px solid white;
                border-top: none;
                border-left: none;
                position: absolute;
                left: 3px;
                top: 0;
                z-index: 30;
                transform: rotate(45deg) scale(1);
            }
        }
    }
</style>
<style lang="less" rel="stylesheet/less">
    @import '../../mixin/mixin.less';
    .checkboxcont-selected-last .j-checkbox {
        border-color: @jbluelight;
    }
</style>

My initial thought is that I add the class by using this.$el after I clicked the component, it can be accessed because I dispatched the click event, and I just can't access the other component:

if(this.isSelected) {
    this.isSelected = false;
    this.$el.classList.add("checkboxcont-selected-last")
} else {
    this.isSelected = true;
}

And I remove the class by using native HTML DOM operation when I dispatch the click event because I can not access the other component, so the complete definition of clickevent is that:

clickevent(event) {
    let selectedLast = document.querySelector(".checkboxcont-selected-last");
    if(selectedLast) {
        selectedLast.classList.remove("checkboxcont-selected-last")
    }
    if(this.isSelected) {
        this.isSelected = false;
        this.$el.classList.add("checkboxcont-selected-last")
    } else {
        this.isSelected = true;
    }
}

It looks good, but I can not add classname of my component when I use v-bind to bind my component's classname, is it wrong? And Is it unable to use native HTML DOM operation when I bind my component's classname with Vue?

Answer 1

A better way to dynamically add or remove class can be using v-bind:class . There are different ways you can add a dynamic class based on a vue data variable.

I see you are already using it:

<div class="checkboxcont" :class="{'checkboxcont-selected': isSelected}" @click="clickevent">

So here this div will have only one class : checkboxcont if isSelected is false, and two classes : checkboxcont and checkboxcont-selected if isSelected is true.

Edited:

Given that you want to add a class to DOM on another component, I can think of two ways:

1. Using Web API: You can do following if you know the id of the element you want to add class using Element.className :

var d = document.getElementById("yourElem") d.className += " otherclass"

2. Vuex way: You can have a centralised state provided by vue or use vuex to manage state, these state variables can be changed across components, and can be used to add/remove class dynamically.

You can have a look at my this answer to understand more about vuex.