1

我有一个我应用的组件

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

1 回答 1

0

根据official docs

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

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

于 2019-01-13T15:55:58.727 回答