Javascript 如何通过VueJS组件迭代并更改属性值

我正在尝试使用VueJS构建排序算法的可视化。以冒泡排序为例，我设法让所有的东西都能正常工作。我只想更改排序时比较的元素的颜色。我的Bar元素有一个颜色porp，我想在bubbleSort函数循环中更改它，这样每当一个元素与另一个元素进行比较时，一个元素变为蓝色和绿色，在比较结束后，下一个元素变为蓝色和绿色，依此类推

问题是：如何通过我的条元素迭代并更改颜色属性

我在vanilla JS中尝试过getAttribute（），但它不适用于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>

分类
重置
从“./algorithms/helperfunctions”导入*作为HF；
从“/Bar.vue”导入条形图；
导出默认值{
名称：“元素”，
组成部分：{
酒吧
},
数据（）{
返回{
阵列：[]，
颜色：“红色”，
当前：“蓝色”，
比较：“绿色”
};
},
方法：{
arrayPopulate（）{
this.array=[]；
for（设i=0；i<40；i++）{
设n=Math.floor（Math.random（）*100+10）；
如果（！this.array.includes（n））{
这个.array.push（n）；
}
}
},
异步bubbleSort（）{
//let elements=document.getElementsByTagName（“Bar”）；
设len=this.array.length；
for（设i=0；ithis.array[j+1]）{
HF.arraySwap（this.array，j+1，j）；
等待HF.睡眠（）；
}
}
}
返回此.array；
}
},
创建（）{
this.arrayPopulate（）；
}
};

在Vue中设置属性的适当方法是在不干扰setAttribu的情况下，从子级向父级提供属性 最直接的方法是基于元素动态获取颜色。
这样做可以：

方法：{
getColor（elem）{
返回元素>0.5？'red'：'green'；
}
}

然而，在准备生产的应用程序中，我会提供颜色属性和元素，因为该方法在每次渲染时都会调用，并且对性能不是最好的

arrayPopulate（）{
this.array=[]；
for（设i=0；i<40；i++）{
设n=Math.floor（Math.random（）*100+10）；
如果（！this.array.includes（n））{
this.array.push（{n，color:n>0.5？'red'：'green'}）；
}
}
},

您是否尝试过

$attrs

或

此操作。$attrs

在子组件中而不是

$attr

，顺便说一句，您似乎正在传递

：color=“color”

以正确的方式将其发送给孩子，特别是访问孩子中的color属性：

$attrs.color

或

此。$attrs.color

您的方式只会使它们变为绿色，如果我尝试使用重置按钮，它会给我一个key undefined的key错误，修改排序函数后，它只对数组中的一个元素进行排序，但是对象的想法很好，因为我成功地改变了我想要的颜色。当然，我不知道您打算使用的确切逻辑，所以这只是一个例子：）尝试使用

：key=“elem.n”

来确保您的密钥是唯一的