Vue.js DOM未更新(将Symfony表单与动态内容集成)

Question

我制作了一个动态vue component，它用Symfony/Twig加载生成的整个表单后端。对于简单的表单来说，这很好。

现在，我试图让它使用动态字段(假设国家/城市)：当您在表单的一个输入中选择一个country时，ajax调用更新城市输入中的选择。

我被困在最后一步了。我得到了更新后的字段的html，我用这个新对象替换了输入，但是更改没有显示在DOM中。

下面是我组件的代码。在initializeDynamicFields()方法中(在代码的底部)，在ajax调用成功后，我进行了不像我希望的那样更新DOM的替换。dynamicFieldParent和dynamicFieldChild是表单的动态字段的ids。

我在mounted()和updated()中都调用了这个方法。

编辑问题解决了:我是在ajax回调中调用组件的支柱，而不是事先将其内容存储到变量中。

<template>
    <div class="card bg-light border-dark">
        <div class="card-body">
            <h3 v-if="title" class="card-title">{{ title }}</h3>
            <div v-html="content" v-on:click.capture="handleClick"></div>
            <!--<div ref="body" v-on:click.capture="handleClick"></div>-->
        </div>
    </div>
</template>

<script type="text/babel">
    var formSerialize = require('form-serialize');
    export default {
        name: "dynamic-form",
        props: ['url', 'dynamicFieldParent', 'dynamicFieldChild'],
        data() {
            return {
                title: '',
                content: '',
                components: null
            };
        },
        created() {
            this.load(this.url);
        },
        mounted() {
            if (this.dynamicFieldParent) {
                this.initializeDynamicFields();
            }
        },
        updated() {
            if (this.dynamicFieldParent) {
                this.initializeDynamicFields();
            }
        },
        methods: {
            load(url) {
                axios.get(url, {
                    headers: {'X-Requested-With': 'XMLHttpRequest'}
                }).then(response => {
                    this.title = response.data.title;
                    this.content = response.data.content;
                    this.components = response.data.components;
                });
            },

            handleClick(e) {
                if (e.target.tagName == 'BUTTON' && e.target.type == 'submit' && e.target.form.checkValidity()) {
                    this.submit(e);
                }
            },

            submit(e) {
                e.preventDefault();
                this.$root.$emit('form-sending');
                let data = formSerialize(e.target.form, {
                    hash: false, empty: true
                });
                data += '&' + e.target.name + '=' 
                        + encodeURIComponent(e.target.value);
                axios.post(this.url, data, {
                    headers: {'X-Requested-With': 'XMLHttpRequest'}
                }).then(response => {
                    this.title = response.data.title;
                    this.content = response.data.content;
                    this.components = response.data.components;
                    if (response.status == 201) {
                        this.$root.$emit('form-success');
                    }
                });
            },

            initializeDynamicFields() {
                var $parent = $('#' + this.dynamicFieldParent);
                var $child = $('#' + this.dynamicFieldChild);
                $parent.change(function() {
                    var $form = $parent.closest('form');
                    var formData = new FormData();
                    formData.set($parent.attr('name'), $parent.val());
                    axios.post($form.attr('action'), formData).then(response => {
                        $child.replaceWith(
                            response.data.content.find('#' + this.dynamicFieldChild)
                        );

                    });
                });
            }
        }
    }
</script>

Answer 1

来自https://v2.vuejs.org/v2/api/#v-html

注意:内容是以普通HTML格式插入的--它们不会被编译为Vue模板

换句话说，由于您使用v-html加载后端生成的表单，所以它不是作为Vue模板使用，而是以普通HTML的形式粘贴进来，这意味着它无法以Vue应用程序中通常使用的方式绑定到值和更新内容。