如何通过按钮在新标签页打开Vue.js中绑定的接口返回HTML数据

实现方案 #

你当前的代码存在两个问题：一是div标签本身不支持target属性，二是带v-html的标签会覆盖内部原本的「Explore More」文本，也没有绑定点击事件。可以按以下步骤修改实现需求：

1. 调整模板结构

把内容渲染区域和触发按钮拆分，给按钮单独绑定点击事件，示例代码如下：

<li v-for="(item, index) in paginated('items')" :key="index" class="flex-item">
  <!-- 原有详情内容渲染区域 -->
  <div v-html="item.details_en"></div>
  <!-- 点击触发的按钮 -->
  <button @click="openDetailInNewTab(item.details_en)">Explore More</button>
</li>

2. 新增点击事件处理方法

在组件的methods中添加新标签页打开逻辑：

<script>
export default {
  // 保留原有的其他组件配置
  methods: {
    openDetailInNewTab(htmlContent) {
      // 打开空白新标签页
      const newTab = window.open('_blank')
      // 如果需要给新页面加统一标题、样式，可以拼接完整HTML结构
      const fullPageContent = `
      <!DOCTYPE html>
      <html lang="zh-CN">
      <head>
        <meta charset="UTF-8">
        <title>内容详情</title>
        <style>
          /* 可自定义新页面的通用样式 */
          body { padding: 24px; max-width: 1100px; margin: 0 auto; font-family: sans-serif; }
        </style>
      </head>
      <body>${htmlContent}</body>
      </html>
      `
      // 将内容写入新标签页
      newTab.document.write(fullPageContent)
      // 结束文档写入流程，避免渲染异常
      newTab.document.close()
    }
  }
}
</script>

注意事项

如果item.details_en的内容来源不可信，建议先做XSS过滤再使用，避免注入恶意脚本。

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