Получить «активное» имя класса динамического класса в vue

Question

У меня есть этот код для карты в vue:

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

Я создаю 6 элементов с этим шаблоном, и граница становится красной в случаях, когда значение превышает лимит.Вот код функции:

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

          return true;
        }
        return false;

      }

Я пытаюсь получить имя класса различных элементов:

document.getElementById("card").className

И все время возвращает все имякласс без динамического условия.

 card border-danger

Возможно ли получить имя_класса, которое использовалось в данный момент?

Answer 1

Для этого кода :class="{'border-danger': alertaCPU }" условие класса всегда возвращает true ;alertaCPU всегда истинное значение , поскольку оно является функцией.

Синтаксис класса Vue.js предполагает, что объект класса имеет следующий тип:

{ 'class-name': truthyValue }

Здесь вы просто передаете имя функции, которое всегда является истинным значением .Вы должны преобразовать эту функцию в getter следующим образом:

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

        return true;
        }
        return false;

    }
}

Во-вторых, ваш класс "card" статически связан с вашим элементом DOM и всегда будет существовать независимо от динамически добавляемого класса.Здесь вы можете использовать Regular Expression или .classList вместо свойства .className, например:

document.getElementById("card").classList;

classList - это в основном массив всех классов, примененных к этому элементу.Подробнее об этом здесь .