Vue.js数据加载前默认值设置异常：无数据时页面消失求助

你遇到的核心问题是：在mounted钩子中把数组arr的各字段设为null，而页面模板大概率用了v-if判断这些字段的存在性——当值为null时，v-if会直接移除对应DOM元素，导致页面内容消失。另外你设置backgroundColor = "none"是错误的，CSS中背景色没有none这个有效值，应该用transparent表示透明。

解决办法 #

方法1：设置实际默认文本而非null/空字符串

把默认值换成用户能看懂的占位文本，确保模板渲染时不会因为值为空而隐藏元素：

mounted() {
  for (var i = 0; i < 4; i++) {
      document.getElementById(`v${i}`).style.backgroundColor = "transparent";
      this.arr[i].device_name = "未连接设备";
      this.arr[i].manufac_predict_time = "--";
      this.arr[i].cnc_status = "无状态";
      this.arr[i].alarm_status = "无告警";
      this.arr[i].comm_status = "未通信";
  }
}

方法2：在模板层直接处理默认值

如果不想修改mounted里的逻辑，可以在Vue模板中给绑定字段添加默认兜底：

<!-- 示例：给每个字段加默认值 -->
<div class="device-item" v-for="(item, index) in arr" :key="index">
  <span>{{ item.device_name || "未连接设备" }}</span>
  <span>{{ item.manufac_predict_time || "--" }}</span>
  <span>{{ item.cnc_status || "无状态" }}</span>
</div>

另外如果模板用了v-if控制元素显示，改成v-show也能避免元素被移除（v-show只是隐藏元素，不会删除DOM结构）。

内容的提问来源于stack exchange，提问作者user19395617