Javascript 在非输入元素上使用v-model并将其绑定到innerHTML值 背景信息

我们使用自定义指令来处理本地化。它通过向指令提供内容id来工作，如下所示：

<div v-for="content in contentIds">
    <span v-content="content.id"></span>
</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标记将呈现为

要翻译的文本

---

这一切都发生在组件之外，并且在创建页面后异步发生。在一个用例中，我在一个表中显示获取的数据，其中一列将始终对应于一个包含10个字符串的集合列表。但是，为此列返回的数据是字符串的内容ID，而不是字符串本身。这些数据总是在翻译后的内容已经返回后提取，出于某些原因，我不想创建一个仅包含这些内容值的单独请求。我想在初始内容请求中包含这10个字符串。出于这个原因，我将创建10个具有特定内容id值的虚拟元素，这些值将始终是初始内容获取的一部分

我制作了一个组件，它接受

contentid的列表

，并在模板中显示它们，如下所示：

<div v-for="content in contentIds">
    <span v-content="content.id"></span>
</div>

一旦返回值并填充到

中，我想在列表中返回已翻译的字符串。鉴于我没有引用组件中正在执行的请求，我不能简单地使用回调映射数据

---

我的问题 我基本上需要使用

v-model

的等价物，但是在

元素上，元素的

innerHTML

绑定到一个变量。如果

innerHTML

值在定义该元素的组件之外发生更改，我仍然需要该组件查看更改并能够反应性地更新变量

有没有办法做到这一点？

您可以通过设置

innerHTML

来观察所做的更改，但不幸的是，这会破坏任何模板绑定。Vue仍然可以更新和跟踪该变量，但如果使用mustache语法，则该变量将不再有效。见jsfiddle。