vue v-if no css+js control

Question

Tables hidden by the v-if directive, except for tables visible when loading the page for the first time, cannot be 'css+js' controlled. If I delete all the 'v-if, everything works. Maybe it seems that only the first 0 of the for statement is executed.

What could be the problem?

This is the HTML code-

<div class="machine_w state" id="ss0">기기 상태</div>
<div class="machine_w time table" id="t0">압력 센서 상태</div>
<div class="machine_w total_user_time" id="a0">알람 상태</div>

This is the script code-

  methods: {
    vacuum_status() {
      for (var i = 0; i < 4; i++) {
        if (this.$store.state.mqtt_data_arr[i].vacuum_status == 1) {
          document.getElementById(`t${i}`).style.backgroundColor = "#e96666";
          alert(
            `${this.$store.state.mqtt_data_arr[i].device_name}호기 압력센서 비정상`
          );
          return;
        } else if (this.$store.state.mqtt_data_arr[i].vacuum_status == 0) {
          document.getElementById(`t${i}`).style.backgroundColor = "#3baf4a";
        }
      }
    },
}

your working with vue you don't really need document.getElementById you can toggle a class or set styles when you loop over mqtt_data_arr, i.e :style="item.vacuum_status ? '#e96666' : '#e96666'" if you show more of the template including the loop should get a better answer — Lawrence Cherone
– Lawrence Cherone, Commented Dec 9, 2022 at 10:33

Vasyl · Accepted Answer · 2022-12-09 10:24:58Z

1

Because the element that is not rendered by v-if, does not exist on the page. It means there is no any selector.

answered Dec 9, 2022 at 10:24

Vasyl

3343 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

vue v-if no css+js control

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related