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

Question

我有一个我应用的组件

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

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

<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>

Answer 1

根据 official docs

，您的输入不会绑定到该数据项，因为它未编译

The contents of the span will be replaced with the value of the rawHtml property, interpreted as plain HTML - data bindings are ignored. Note that you cannot use v-html to compose template partials, because Vue is not a string-based templating engine. Instead, components are preferred as the fundamental unit for UI reuse and composition

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

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

Dynamic v-model don't complete inputs using v-html directive

vue.js

vuejs2

v-model

vue-directives