动态 v-model 不使用 v-html 指令完成输入答案

【问题标题】：Dynamic v-model don't complete inputs using v-html directive动态 v-model 不使用 v-html 指令完成输入
【发布时间】：2019-06-07 16:39:23
【问题描述】：

我有一个我应用的组件

<div v-html="dataProperties.replace(/name/g, index)">

在原始 HTML 的 dataProperties 中，我有一个带有
v-model="data[name].property" 的输入标签除了输入保持为空，即使 data[index].property 存在并且在我的组件数据中不为空。

<template>
<div class="entity-list" :class="{'client-empty': !entities.length, row: entities.length}">
    <div v-for="(entity, index) in entities" class="col-md-6 entity-item">
        <div class="data">
            <slot :entity="entity">
                {{ entity.id }}
            </slot>
            <div v-html="dataProperties.replace(/__name__/g, index)">
            </div>
        </div>
    </div>
    <template v-if="!entities.length">
        <h6>Aucun gestionnaire</h6>
        <img :src="imgPath" alt="tobad"/>
    </template>
</div>
</template>

<script>
    export default {
        name: "ListingForm",
        props: [
            'entities',
            'imgPath',
            'dataProperties'
        ],
        data() {
            return {
            }
        }
    }
</script>

【问题讨论】：

标签： vue.js vuejs2 v-model vue-directives

【解决方案1】：

根据official docs，您的输入将不会绑定到该数据项，因为它没有被编译

span 的内容将替换为 rawHtml 属性的值，解释为纯 HTML - 数据绑定被忽略。请注意，您不能使用 v-html 来编写模板部分，因为 Vue 不是基于字符串的模板引擎。相反，组件更适合作为 UI 重用和组合的基本单元

要处理您的用例，您应该采取不同的方式，例如仅通过道具传递数据而不是原始 html，并正常绑定您的输入

【讨论】：