获取vue中动态类的“活动”类名称

Question

I have this code for a card in vue:

<div  id="card" class="card" :class="{'border-danger': alertaCPU }" style="max-width: 18rem;">

I create 6 elements with this template and the border becomes red in the cases that the value gets over a limit. This is the code for the function:

  alertaCPU: function() {
        if (this.valor > this.limite ) {
          this.audio.play();
          console.log("Playingg");

          return true;
        }
        return false;

      }

I try to get the name of the class of the different elements :

document.getElementById("card").className

And all the time it returns all the name of the class without the dynamic condition.

 card border-danger

Is possible to get the className that is been used at this moment?

Answer 1

For this code :class="{'border-danger': alertaCPU }" , class condition always returns true ; alertaCPU is always truthy value since it is a function.

Vue.js class syntax expects a class object to be of the following type:

{ 'class-name': truthyValue }

Here you are just passing a function name which is always a truthy value . You must covert this function to getter like following:

computed: {
    alertaCPU: function() {
        if (this.valor > this.limite ) {
        this.audio.play();
        console.log("Playingg");

        return true;
        }
        return false;

    }
}

Second, your class "card" is statically bound to your DOM element and will always exists irrespective of the dynamically added class. What you can do here is to Regular Expression or .classList instead of .className property like:

document.getElementById("card").classList;

classList is basically an array of all the classes applied to that element. Read more about it here .