Vue中用v-html渲染API返回HTML时window.onload未触发的解决方案

问题原因 #

window.onload事件在整个页面初始加载完成后就会触发，但v-html是在Vue组件挂载后才动态渲染内容，此时window.onload早已执行完毕，导致HTML里的window.onload回调不会被触发，最终多语言内容全部显示。

解决方案 #

方案1：在Vue中手动调用切换语言函数

当v-html渲染完成后，直接调用HTML中定义的toggleLanguage函数：

• 通过监听factsLabelTemplate的变化，结合$nextTick确保DOM更新完成后执行：

watch: {
  factsLabelTemplate(newVal) {
    if (newVal) {
      this.$nextTick(() => {
        window.toggleLanguage('english');
      });
    }
  }
},
mounted() {
  // 初始化时若已有内容，也需执行一次
  if (this.factsLabelTemplate) {
    this.$nextTick(() => {
      window.toggleLanguage('english');
    });
  }
}

方案2：修改API返回的HTML内容

移除window.onload绑定，直接在HTML末尾调用toggleLanguage('english')，让内容渲染时立即执行切换逻辑：

function toggleLanguage(language) {
        // Hide all content
        document.querySelectorAll('[data-language]').forEach(function(el) {
            el.style.display = 'none';
        });

        // Show content for the selected language
        document.querySelectorAll('[data-language="'+ language +'"]').forEach(function(el) {
            el.style.display = 'block';
        });
}

<!-- 替换原window.onload，直接调用函数 -->
toggleLanguage('english');

<div class="abcd" data-language="english">Additional Charges & Terms</div>
<div class="abcd" data-language="spanish">Cargos y condiciones adicionales</div>

方案3：不依赖HTML中的函数，自行实现语言切换

在Vue中直接操作DOM，手动控制语言内容的显示隐藏：

watch: {
  factsLabelTemplate(newVal) {
    if (newVal) {
      this.$nextTick(() => {
        // 隐藏所有语言模块
        document.querySelectorAll('[data-language]').forEach(el => {
          el.style.display = 'none';
        });
        // 显示默认语言模块
        document.querySelectorAll('[data-language="english"]').forEach(el => {
          el.style.display = 'block';
        });
      });
    }
  }
}

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