如何将VUE指令与VUE-I18N结合使用？

Question

我与我本地化的句子中包含一个标签的句子之一，此元素应触发另一个模态。但是，当我使用

i18n

或

anchor

本地化时。

below是我的

@click

文件，在其中创建

v-on:click

实例：

resources.js

根据以下内容，我在我的

i18n

上导入了这一点：

import { createI18n } from "vue-i18n";
import store from "../../store/index.js";

const activeLocale = store.getters.languageId;

const resources = createI18n({
    locale: activeLocale,
    fallbackLocale: "tr",
    messages: {
        en: {
            expiredAccountPanel: {
                info: "You have {accountCount} social media account(s) which needs to be reconnected. Please contact with your administrator. Click <a @click="openExpiredAccountsModal" style='color:#0D4BA0'>here</a> to view respective social media account(s)."
            }
        }
    }
});

export default resources;

I注入要本地化为我的自定义

main.js

组件的文本：

import resources from "./configs/localization/resources";

const app = createApp(App);

app.use(resources);
app.mount("#app");

最终，这是我各自的自定义组件：

warning-panel-base

我也尝试了

<warning-panel-base
    class="home_warning_panel" 
    :page-warning="true" 
    :show="hasExpiredAccounts" 
    :text="$t('expiredAccountPanel.info', { accountCount: expiredAccoutsCount })"
    @close-warning-modal="closeWarningModal"
></warning-panel-base>

，但它也没有奏效。

如何在

<template>
    <transition name="panel">
        <div 
            v-if="show" class="warning_panel_wrapper" 
            :class="
                { 
                    page_margin: pageWarning, 
                    form_margin: formWarning 
                }"
            >
            <div class="text_section">
                <font-awesome-icon :icon="['fas', 'triangle-exclamation']" />&nbsp;
                <span>{{ text }}</span>
            </div>
            <div class="close_button_section">
                <span class="icon material-icons" @click="closeWarningModal">close</span>
            </div>
        </div>
    </transition>
</template>

<script>
export default {
    props: [
        "show", 
        "text", 
        "formWarning", 
        "pageWarning"
    ],
    emits: ["closeWarningModal"],
    methods: {
        closeWarningModal() {
            this.$emit("closeWarningModal");
        },
        openExpiredAccountsModal() {
            console.log("modal oppened")
        }
    }
}
</script>

文本中正确实施特定的指令？

提前感谢
    

如果不更改VUE-I18N的工作方式，就无法完成。嵌入html可以与某些限制相关，但在这里不适用，因为

<span>{{ text }}</span>

是vue模板，需要将其呈现给HTML，并且预计它会意识到componstement属于。

推荐的方法是以一种可以在模板中连接的方式拆分消息。如果由此产生的标记应该重复使用，则可以将其提取到接受

<span v-html="text"></span>

prop并具有

i18n

事件的组件：

@click="openExpiredAccountsModal"

Answer 1

可以用作：

openExpiredAccountsModal