Vue项目中出现‘Cannot set property innerHTML of null’错误的问题咨询（含数组展示需求）

嘿，我来帮你搞定这个Vue的错误问题，顺便给你提供靠谱的实现方式～

错误原因分析 #

你碰到的这个报错，核心问题是DOM渲染时机不对。在Vue组件的<script>标签里直接写document.getElementById的时候，组件的模板还没被渲染到页面上——也就是说<div id="demo">和<div id="demo1">这两个元素此时压根不在DOM树里，getElementById找不到它们自然返回null，那设置innerHTML肯定就报错啦。

正确实现方案 #

方案一：用Vue插值语法（最推荐，符合Vue设计思想） #

Vue是数据驱动视图的框架，咱们完全没必要手动操作DOM，直接用插值语法把数据渲染到模板里就好：

<template>
  <div>
    <div>{{ formulaOneTeams }}</div>
    <div>{{ formulaOneTeams.join(" * ") }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formulaOneTeams: ["Red Bull", "Mercedes", "Ferrari", "Mclaren", "Aston Martin", "Alpine Racing", "Haas", "Williams", "Alpha Tauri", "Alfa Romeo"]
    }
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

这里把数组放到组件的data选项里，模板里用{{ }}就能直接渲染数据，Vue会自动帮你处理好DOM渲染的时机，省心又规范。

方案二：用mounted生命周期钩子（适合必须手动操作DOM的场景） #

如果你确实有需要手动操作DOM的场景（比如集成某些复杂第三方库），可以把DOM操作的代码放到Vue的mounted钩子中——这个钩子会在组件挂载完成（DOM已经渲染到页面）后才执行：

<template>
  <div>
    <div id="demo"></div>
    <div id="demo1"></div>
  </div>
</template>
<script>
export default {
  mounted() {
    const formulaOneTeams = ["Red Bull", "Mercedes", "Ferrari", "Mclaren", "Aston Martin", "Alpine Racing", "Haas", "Williams", "Alpha Tauri", "Alfa Romeo"];
    document.getElementById("demo").innerHTML = formulaOneTeams;
    document.getElementById("demo1").innerHTML = formulaOneTeams.join(" * ");
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

注意哦，代码要放到export default对象的mounted方法里，而不是直接写在script顶层，这样才能确保DOM元素已经存在时再执行操作。

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