Question

我试图创建一个非常基本的基于密钥的翻译系统，因为我们的系统不像vuei18n那样具有扩展性。我只是用钥匙加载一个json，每个键有四个翻译。总共约一百件。现在;我使用了一个单独的Translator窗口组件，我链接到Vue就像这样;

Vue.prototype.translate = function(key){
   window.addEventListener('switchedLanguage', function(event) { 
        console.log(event.detail);
        return window.translator.getTranslation(key);
    });
    return window.translator.getTranslation(key);
}

并且为了在模板中呈现它们，我执行以下操作：

{{ translate('key') }}

据我所知，将翻译器等脚本直接连接到窗口并不是最好的做法，但现在正在应用程序中工作。

背后的想法是，当翻译中的语言发生变化时，它会尝试取回密钥。虽然这在技术上有效，但在应用程序中我没有看到键被重新呈现为不同的语言。我现在已经在兔子洞的深处，似乎没有得到一个明确的答案，除了它没有绑定到数据模型的事实。但对于某些组件，根据输入，它们最多可以有十五个或更多键。将所有密钥存储在每个组件的数据模型中是不可行的，因为在我看来，这会不必要地混淆数据模型。

所以，到目前为止我所尝试的是以下内容：

使用带键作为输入的过滤器（这会导致Vue因为无法解析过滤器而导致过滤，因为它无法通过Window.translator找到翻译器）
重新加载整个窗口（工作时，非常难看的解决方案，因为它将用户带回主屏幕）

Vue js原型函数重新渲染模板

0 个答案: