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

【问题标题】：Use v-model on a non-input element and bind it to the innerHTML value在非输入元素上使用 v-model 并将其绑定到 innerHTML 值
【发布时间】：2019-11-22 08:00:50
【问题描述】：

背景资料

我们使用自定义指令来处理本地化。它通过向指令提供内容 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 值在定义该元素的组件之外发生更改，我仍然需要组件来查看更改并能够响应式更新变量。

有没有办法做到这一点？

【问题讨论】：

您可以使用MutationObserver 来观察通过设置innerHTML 所做的更改，但不幸的是这会破坏任何模板绑定。 Vue 仍然可以更新和跟踪该变量，但如果您使用 mustache 语法，它将不再起作用。见thisjsfiddle。

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

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

父组件：

<ChildComponent v-model="foo"/>

子组件：

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

【讨论】：