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

问题

I have a component where I applied

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

Inside the dataProperties which is raw HTML, I have an input tag with
v-model="data[name].property" except that the input stay empty even if data[index].property exist and isn't null in my component data.

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

回答1:

Your input will not be bound to that data item since it's not compiled, according to the 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

to deal with your use case you should proceed differently like only passing the data not the raw html via props, and bind your input normally

来源：https://stackoverflow.com/questions/54168854/dynamic-v-model-dont-complete-inputs-using-v-html-directive