vue v-if no css js control-CodePudding

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  id="ss0">기기 상태</div>
<div  id="t0">압력 센서 상태</div>
<div  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";
        }
      }
    },
}

CodePudding user response：

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