I want to give different colors depending on the % of the 5 batteries. The problem is that the color isn't per-battery, it's spread across the entire battery.

It's probably because bmss data comes in at once. But I don't know how to solve this. It is implemented until the battery changes according to the % in green. all battery image

The problem is color. color battery image

https://codesandbox.io/s/battery-lx3dqz?file=/src/App.vue

data vue

  <template>
      <div id="charging_div" >
        <div>
          <div id="charging_top_div">
            <div v-for="(bms, index) in bmss" :key="index">
              <div id="charging_left_div">
                <ProgressBattery :bmss="bms" />
                <span>{{ bmss[index].soc }}</span>
              </div>
            </div>
          </div>
          <div >
            <p>{{ time }} kW</p>
            <p>{{ power }} kW</p>
          </div>
          <div id="charging_bottom_div">
            <button id="harging_btn" v-on:click="click_stopCharging_btn">
              stop charging
            </button>
          </div>
        </div>
      </div>
    </template>
    
    <script>
    import ProgressBattery from "./ProgressBattery.vue";
    
    export default {
      name: "connect",
    
      components: {
        ProgressBattery,
      },
    
      data() {
        return {
          time: "",
          power: "",
          bmss: [
            {
              soc: 5,
            },
            {
              soc: 45,
            },
            {
              soc: 20,
            },
            {
              soc: 100,
            },
            {
              soc: 30,
            },
          ],
        };
      },

fetching vue

 <template>
      <div id="progress-bar-battery">
        <div >
          <span v-if="this.bmss.soc >= 100"  id="v100"></span>
          <span v-if="this.bmss.soc >= 90"  id="v90"></span>
          <span v-if="this.bmss.soc >= 80"  id="v80"></span>
          <span v-if="this.bmss.soc >= 70"  id="v70"></span>
          <span v-if="this.bmss.soc >= 60"  id="v60"></span>
          <span v-if="this.bmss.soc >= 50"  id="v50"></span>
          <span v-if="this.bmss.soc >= 40"  id="v40"></span>
          <span v-if="this.bmss.soc >= 30"  id="v30"></span>
          <span v-if="this.bmss.soc >= 20"  id="v20"></span>
          <span v-if="this.bmss.soc >= 10"  id="v10"></span>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: "ProgressBattery",
      props: {
        bmss: {
          type: Object,
          required: true,
          default: function () {
            return [{ soc: 0 }];
          },
        },
      },
      mounted() {
        if (this.bmss.soc >= 61) {
          for (let i = 1; i < 11; i  ) {
            document.getElementById(`v${i}0`).style.backgroundColor = "#4ee533";
            console.log(this.bmss.soc   "초록"   `v${i}0`);
          }
        } else if (this.bmss.soc >= 21 && this.bmss.soc <= 60) {
          for (let i = 1; i < 7; i  ) {
            document.getElementById(`v${i}0`).style.background = "#FFA500";
            console.log(this.bmss.soc   "주황"   `v${i}0`);
          }
        } else if (this.bmss.soc <= 20 && this.bmss.soc >= 0) {
          for (let i = 1; i < 3; i  ) {
            document.getElementById(`v${i}0`).style.background = "#FF0000";
            console.log(this.bmss.soc   "빨강"   `v${i}0`);
          }
        }
        console.log(this.bmss.soc);
      },
    };
    </script>

CodePudding user response：

I think the issue in your approach that you use id html attribute for the style, and because there will be more than one battery so the id will not be unique.

It would better to use Style directive instead of changing style by id.

I just fixed the issue and make some refractory in the code.

https://codesandbox.io/s/battery-forked-1ze0jx