Vue Props数据....您可以带一个吗？

Question

我想根据5个电池的％给出不同的颜色。问题在于颜色不是每击，它散布在整个电池中。

这可能是因为BMSS数据立即出现。但是我不知道该如何解决。 它将实现，直到电池根据绿色的％变化为止。 所有电池图像

问题是颜色。 颜色电池图像

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

/strong>

  <template>
      <div id="charging_div" class="frame">
        <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 class="accumulate">
            <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,
            },
          ],
        };
      },

提取vue

 <template>
      <div id="progress-bar-battery">
        <div class="box">
          <span v-if="this.bmss.soc >= 100" class="item" id="v100"></span>
          <span v-if="this.bmss.soc >= 90" class="item" id="v90"></span>
          <span v-if="this.bmss.soc >= 80" class="item" id="v80"></span>
          <span v-if="this.bmss.soc >= 70" class="item" id="v70"></span>
          <span v-if="this.bmss.soc >= 60" class="item" id="v60"></span>
          <span v-if="this.bmss.soc >= 50" class="item" id="v50"></span>
          <span v-if="this.bmss.soc >= 40" class="item" id="v40"></span>
          <span v-if="this.bmss.soc >= 30" class="item" id="v30"></span>
          <span v-if="this.bmss.soc >= 20" class="item" id="v20"></span>
          <span v-if="this.bmss.soc >= 10" class="item" 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>

Answer 1

我认为您的方法中使用ID HTML属性的问题，并且因为将有一个以上的电池，因此ID不会是唯一的。

最好使用样式指令，而不是通过ID更改样式。

我只是修复了问题，并在代码中制作了一些难治性。

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