脚本无法设置 innerHTML，但我使用回调和 v-if 来确保可用性

问题描述

我有一个脚本，我在静态 HTML 页面中使用它没有问题。出于某种原因，我无法在 Nuxt 项目中使用它。

HTML 在一个组件中，在页面中我有以下内容：

<template>
<div v-if="isScriptLoaded">
  <ComponentA />
  </div>
</template>

<script>
import ComponentA from "@/components/ComponentA";

export default {
    components: {
        ComponentA
    },data () {
    return {
        isScriptLoaded: false
    }
    },head () {
    return {
        title: 'My awesome project',script: [
        {
            hid: 'script',src: 'https://scripturl.com/js/main.js',defer: true,// Changed after script load
            callback: () => { this.isScriptLoaded = true } 
        }
        ]
    }
    }
}
</script>

当我加载页面时，控制台显示：

VM4731 main.js:1 Uncaught TypeError: Cannot set property 'innerHTML' of undefined

解决方法

尝试在 v-if 条件之前添加包装器。

示例：

<div>
 <div v=if="conditional">
   <Component/>
 </div>
</div>