Agfdhyk

I made a dynamic vue component that loads a whole form generated backend with Symfony/Twig. This works fine with simple forms.

Now, I'm trying to make it work with dynamic fields (let say country/city) : when you choose a country in one of the form's input an ajax call update the choices in the cities' input.

I'm stuck on the very last step. I get my updated field's html, I replace the cities input with this new object, but the change doesn't show up in the DOM.

Below's my component's code. In the initializeDynamicFields() method (at the bottom of the code), upon success of an ajax call, I make the replacement that does not update the DOM as I hope it would. dynamicFieldParent and dynamicFieldChild are the ids of the form's dynamic fields.

I'm calling this method in both mounted() and updated().

EDIT Problem solved : I was calling a component's prop inside the ajax callback instead of storing its a content into a variable beforehand.

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

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

Note that the contents are inserted as plain HTML - they will not be compiled as Vue templates

In other words, since you're using v-html to load your backend generated form, it's not used as a Vue template, it's just pasted in as plain HTML, which means it won't be able to bind to values and update things in the way you normally would in a Vue app.