Vue.js与JavaScript异常：设置元素高度遇Uncaught TypeError问题求助

嘿，我一眼就看出问题出在哪了！你在created钩子函数里尝试操作DOM元素，但这个阶段Vue组件还没完成DOM挂载呢，所以document.getElementById('Icontent')根本找不到目标元素，返回的是null，自然就会抛出读取style属性的错误啦。

下面给你几个靠谱的解决办法：

1. 改用mounted钩子操作DOM #

Vue的mounted钩子是在组件完全挂载到DOM之后才触发的，这时候你就能安全地获取到DOM元素了：

<template>
  <div class="Icontent" id="Icontent" :mode="mode">Content {{ mode }}</div>
</template>

<script>
export default {
  name: "Icontent",
  props: ['mode'],
  mounted() {
    // 现在可以正常获取元素并设置高度了
    const contentEl = document.getElementById('Icontent');
    if (contentEl) {
      contentEl.style.height = '300px'; // 替换成你需要的高度值
    }
  }
}
</script>

2. 更优雅的方式：用Vue的ref替代原生DOM查询 #

Vue提供了ref属性来更精准地获取DOM元素，比原生的getElementById更符合Vue的开发习惯：

<template>
  <div class="Icontent" ref="Icontent" :mode="mode">Content {{ mode }}</div>
</template>

<script>
export default {
  name: "Icontent",
  props: ['mode'],
  mounted() {
    // 通过this.$refs直接获取元素
    if (this.$refs.Icontent) {
      this.$refs.Icontent.style.height = '300px';
    }
  }
}
</script>

3. 响应式绑定样式（最推荐的Vue做法） #

如果你是想根据mode属性动态调整高度，那直接用Vue的样式绑定会更合适，完全不用手动操作DOM：

<template>
  <div class="Icontent" :style="{ height: contentHeight }" :mode="mode">Content {{ mode }}</div>
</template>

<script>
export default {
  name: "Icontent",
  props: ['mode'],
  computed: {
    contentHeight() {
      // 根据mode返回对应的高度值
      return this.mode === 'full' ? '100vh' : '300px';
    }
  }
}
</script>

总结一下：永远别在created钩子中操作DOM，要等组件挂载完成后再做；能用Vue响应式特性解决的场景，就尽量避免手动操作DOM，这样代码会更易维护~

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