我们使用自定义指令来处理本地化。它通过为指令提供内容ID来实现，如下所示：
<div v-content="'text.to.translate'"></div>
伪指令创建实现伪指令的所有元素及其对应的内容ID的映射。然后，该指令使用此映射执行请求，以获取显示在页面上所需的所有已转换字符串。成功返回请求后，响应如下所示：
response: {
'text.to.translate': 'Text to translate',
'some.other.text': 'Some other text that is translated'
}
此响应与映射的元素结合在一起，如下所示：
mappedElements.forEach(mappedElem => {
mappedElem.htmlElem.innerHTML = response[mappedElem.contentId]
});
相应的HTML标签随后将呈现为
<div>Text to translate</div>
这一切都发生在组件之外，并且在创建页面后异步发生。在一个用例中，我在表中显示获取的数据，并且其中一列将始终对应于〜10个字符串的设置列表。但是，为此列返回的数据是字符串的内容ID，而不是字符串本身。在返回翻译后的内容之后，总是会获取此数据，并且由于某些原因，我不想仅使用这些内容值创建单独的请求。我想在初始内容请求中包含10个字符串。因此，我将创建10个虚拟元素，这些虚拟元素具有特定的内容ID值，这些值将始终是初始内容提取的一部分。
我制作了一个接受contentIds列表并将其显示在模板中的组件，如下所示：
<div v-for="content in contentIds">
<span v-content="content.id"></span>
</div>
一旦返回值并将其填充到<spans>内部，我想在列表中返回转换后的字符串。鉴于我没有引用正在组件中执行的请求，因此我不能仅使用回调来映射数据。
我基本上需要使用v-model的等效项，但是在<span>元素上，元素的innerHTML被绑定到变量。如果innerHTML的值在定义该元素的组件之外更改，我仍然需要该组件才能看到更改并能够进行动态更新。
有没有办法做到这一点？