动态v模型无法使用v-html指令完成输入 [英] 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)">

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

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>

推荐答案

根据

span的内容将替换为rawHtml属性的值，该值解释为纯HTML-数据绑定将被忽略.请注意，由于Vue不是基于字符串的模板引擎，因此无法使用v-html来组成模板部分.相反，组件是首选的UI重用和合成的基本单元

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

要处理用例，您应该以不同的方式进行操作，就像只通过props传递数据而不是原始html一样，并正常地绑定输入

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

这篇关于动态v模型无法使用v-html指令完成输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！