如何在Vue-i18n本地化文本中正确使用Vue指令？

核心问题原因 #

直接在i18n文本里写@click或v-on:click这类Vue指令，再用v-html渲染时，Vue不会对这部分内容做模板编译——v-html仅插入纯HTML，无法解析Vue专属指令，同时还会破坏i18n的文本解析逻辑，导致本地化失效。

解决方案一：使用i18n组件插槽插值（推荐） #

将可交互元素从i18n文本中剥离，通过占位符+插槽的方式嵌入，既保留本地化能力，又能让Vue正常编译指令。

1. 修改i18n资源文件（resources.js），用占位符标记交互位置：

export default {
  en: {
    warning_msg: "Please click {action} to view details"
  },
  zh: {
    warning_msg: "请点击{action}查看详情"
  }
}

2. 在组件中使用<i18n>组件，通过插槽传入带指令的交互元素：

<template>
  <warning-panel-base>
    <i18n path="warning_msg" tag="div">
      <template #action>
        <a @click="openModal">详情</a>
      </template>
    </i18n>
  </warning-panel-base>
</template>

<script>
export default {
  methods: {
    openModal() {
      // 这里写打开模态框的逻辑
    }
  }
}
</script>

解决方案二：事件委托（适合无法拆分文本的场景） #

如果必须在i18n文本中保留HTML结构，通过父元素的事件委托来捕获交互，避开Vue指令无法编译的问题。

1. 修改i18n资源文件，给交互标签加专属类名：

export default {
  en: {
    warning_msg: "Please click <a class='modal-trigger'>here</a> to view details"
  },
  zh: {
    warning_msg: "请点击<a class='modal-trigger'>这里</a>查看详情"
  }
}

2. 在组件中给父元素绑定点击事件，通过类名判断触发逻辑：

<template>
  <warning-panel-base @click="handlePanelClick">
    <span v-html="$t('warning_msg')"></span>
  </warning-panel-base>
</template>

<script>
export default {
  methods: {
    handlePanelClick(e) {
      if (e.target.classList.contains('modal-trigger')) {
        e.preventDefault(); // 阻止a标签默认跳转行为
        this.openModal();
      }
    },
    openModal() {
      // 这里写打开模态框的逻辑
    }
  }
}
</script>

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