Vue3使用innerHTML时出现Promise类型错误：无法设置null的innerHTML属性

1. 移除冗余的window.onload，利用Vue生命周期 #

Vue的mounted钩子已经确保页面DOM渲染完成，不需要再嵌套window.onload——这会导致代码执行时机延后，甚至和Vue的DOM更新逻辑冲突。直接在mounted里调用getData即可：

mounted() {
  async function getData() {
    // 原getData内部代码保持不变
  }
  getData(); // 直接调用，无需等待window.onload
}

2. 放弃直接操作DOM，改用Vue响应式绑定（推荐） #

直接用document.querySelector和innerHTML违背Vue数据驱动DOM的核心原则，很容易因为v-if/v-for的DOM动态更新导致找不到元素。正确的做法是：

• 在data中定义响应式变量存储接口返回内容
• 模板里用v-html指令渲染内容（注意防范XSS风险）

改造后的完整代码示例：

<template>
  <!-- 用v-for遍历响应式数据，自动渲染对应元素 -->
  <div 
    v-for="item in slotContents" 
    :key="item.classname" 
    :class="item.classname" 
    v-html="item.content"
  ></div>
</template>

<script>
export default {
  data() {
    return {
      slotContents: [] // 存储接口返回的内容列表
    };
  },
  async mounted() {
    const domein = 'mydomain';
    // 收集需要请求的class列表
    const slots = document.querySelectorAll('*[class^="prefix-"]');
    let list = '';
    for (let i = 0; i < slots.length; i++) {
      const firstClass = slots[i].className.split(" ")[0];
      if (firstClass.startsWith('cms-')) { // 用startsWith替代原字符串截取逻辑，更准确
        list += firstClass + ',';
      }
    }
    // 移除末尾多余的逗号
    list = list.slice(0, -1);
    // 请求数据并更新响应式变量
    const res = await fetch(`${domein}/response.php?slots=${list}`);
    const data = await res.json();
    this.slotContents = data;
  }
};
</script>

3. 处理v-if导致的DOM未渲染问题 #

如果你的元素是通过v-if控制显示的，确保在数据加载完成后再渲染元素，或者改用v-show（v-show会保留DOM节点，只是隐藏）：

<template>
  <div 
    v-if="slotContents.length"
    v-for="item in slotContents" 
    :key="item.classname" 
    :class="item.classname" 
    v-html="item.content"
  ></div>
</template>

4. 保留DOM操作时必须加空值判断 #

如果一定要坚持直接操作DOM，必须在设置innerHTML前判断元素是否存在，避免报错：

for (let y = 0; y < data.length; y++){
  const slot = document.querySelector(`*[class*="${data[y].classname}"]`);
  if (slot) { // 先确认元素存在
    slot.innerHTML = data[y].content;
  } else {
    console.warn(`未找到类名为 ${data[y].classname} 的元素`);
  }
}

5. 修正原代码的字符串截取逻辑 #

原代码中substring(0, 7)的判断逻辑有误——'cms-'只有4个字符，应该用startsWith('cms-')替代，避免收集错误的class名称，导致后续找不到对应元素。

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