点击显示Vue视图时出现Cannot read properties of null (reading 'style')错误

算力阿峰

2026-7-19

问题根源与解决方案

你的错误不是脚本加载时机导致的，核心问题是：你要操作的元素没有设置id="view"，但代码里用了document.getElementById("view")去查找，自然返回null，进而触发报错。

看你的模板代码，<div class="view" style="display: none"> 只有class属性为view，没有id属性，这才是找不到元素的真正原因——点击事件是在页面完全加载后才触发的，此时DOM已经渲染完成，不存在脚本提前运行的问题。

解决方法

方法一：修正DOM选择器（快速修复）

给目标div添加id="view"属性，让getElementById能正确找到元素：

<template>
  <h1 @click="showInfo()">Header</h1>
  <!-- 添加id属性 -->
  <div id="view" class="view" style="display: none">
    <AnotherView />
  </div>
</template>

<script>
import AnotherView from "./views/AnotherView.vue";

export default {
  components: { AnotherView },
  methods: {
    showInfo() {
      document.getElementById("view").style.display = "block";
    },
  },
};
</script>

方法二：用Vue响应式状态控制（推荐）

直接操作DOM不符合Vue的设计理念，更优雅的方式是用数据驱动视图：

定义一个状态变量控制视图显示
通过v-show或v-if绑定状态，替代手动修改style

修改后的完整代码：

<template>
  <h1 @click="showInfo()">Header</h1>
  <!-- 用v-show绑定状态 -->
  <div class="view" v-show="isViewVisible">
    <AnotherView />
  </div>
</template>

<style scoped>
.view {
}
</style>

<script>
import AnotherView from "./views/AnotherView.vue";

export default {
  components: { AnotherView },
  data() {
    return {
      // 初始隐藏视图
      isViewVisible: false
    }
  },
  methods: {
    showInfo() {
      // 修改状态显示视图
      this.isViewVisible = true;
    },
  },
};
</script>