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

Question

背景资料

我们使用自定义指令来处理本地化。 它通过向指令提供内容 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值，我仍然需要该组件查看更改并能够被动地更新变量。

有没有办法做到这一点？

Answer 1

我知道这很旧，但是对于找到它的任何人，您都可以发出“输入”，它适用于表单元素和非表单元素：

父组件：

<ChildComponent v-model="foo"/>

子组件：

<div @click="$emit('input', 'bar')">Button</div>