[Vuejs]-How to iterate trough VueJS components and change attribute values

by

0👍

Appropriate way to set properties in Vue is to provide them from child to parent, without interfering with setAttribu
The most straightforward approach would be to dynamically get color based on elem.
Something like this will do:

<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';
  }
}

However in production ready application I’d provide color property alongside with element, because method is called on every render and it is not best for performance.

    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'});
        }
      }
    },

Leave a comment