Как перебрать компоненты VueJS и изменить значения атрибутов

Question

Я пытаюсь построить визуализацию для алгоритмов сортировки, используя VueJS. Мне удалось заставить все работать на данный момент с помощью пузырьковой сортировки в качестве примера. Я просто хочу изменить цвета элементов, которые сравниваются, когда происходит сортировка. У моего элемента Bar есть цветное пятно, и я хочу изменить это внутри моей функции bubbleSort l oop, чтобы при сравнении элемента с другим элементом один становился синим, а один - зеленым, после завершения сравнения следующие элементы становились синими и зелеными, и и т. д.

Вопрос в том, как я могу выполнить итерации через элементы Bar и изменить атрибут цвета?

Я пробовал getAttribute () как в vanilla JS, но он не работает с VueJS, я пытался использовать $ attr, но он говорит, что он не определен.

<template>
  <div class="main">
    <div class="menu-bar">
      <button v-on:click="bubbleSort">Sort</button>
      <button v-on:click="arrayPopulate">Reset</button>
    </div>
    <div class="elements">
      <Bar v-for="elem in array" v-bind:key="elem" :color="color" :value="elem" class="elem" />
    </div>
  </div>
</template>

<script>
import * as HF from "../algorithms/helperfunctions";
import Bar from "./Bar.vue";

export default {
  name: "Element",
  components: {
    Bar
  },
  data() {
    return {
      array: [],
      color: "red",
      current: "blue",
      comparing: "green"
    };
  },
  methods: {
    arrayPopulate() {
      this.array = [];
      for (let i = 0; i < 40; i++) {
        let n = Math.floor(Math.random() * 100 + 10);
        if (!this.array.includes(n)) {
          this.array.push(n);
        }
      }
    },
    async bubbleSort() {
      //let elements = document.getElementsByTagName("Bar");
      let len = this.array.length;
      for (let i = 0; i < len; i++) {
        for (let j = 0; j < len; j++) {
          if (this.array[j] > this.array[j + 1]) {
            HF.arraySwap(this.array, j + 1, j);
            await HF.sleep();
          }
        }
      }
      return this.array;
    }
  },
  created() {
    this.arrayPopulate();
  }
};
</script>

Answer 1

Подходящий способ установить свойства в Vue - это предоставить их от потомка к родителю, не вмешиваясь в setAttribu. Самый простой подход - это динамическое получение цвета на основе elem.
Примерно так:

<Bar v-for="elem in array" v-bind:key="elem" :color="getColor(elem)" :value="elem" class="elem" />

methods: {
  getColor(elem) {
    return elem > 0.5 ? 'red' : 'green';
  }
}

Однако в готовом к работе приложении я бы предоставил свойство цвета вместе с элементом , потому что метод вызывается при каждом рендеринге и не самый лучший для производительности.

    arrayPopulate() {
      this.array = [];
      for (let i = 0; i < 40; i++) {
        let n = Math.floor(Math.random() * 100 + 10);
        if (!this.array.includes(n)) {
          this.array.push({n, color: n > 0.5 ? 'red' : 'green'});
        }
      }
    },