Dynamic components in Vue 2 lose their values and refresh when unrelated values change

I've been struggling with this problem for a long time and almost thought it was a bug.

I'm using a dynamic vue component to replace tags in the text body with input. This works as expected:

hydrateBaselineQuestion(targetObject) {
            var html = '<p>'
            
            html = html + targetObject.baseline

            if (targetObject.baseline_questions) {
                targetObject.baseline_questions.forEach((questionData, index) => {
                    var counter = index + 1,
                        placeholder

                    if (typeof questionData.placeholder_text === 'undefined' || !questionData.placeholder_text || questionData.placeholder_text === null) {
                        placeholder = 'Enter value'
                    }
                    else {
                        placeholder = questionData.placeholder_text
                    }
                    
                    switch (questionData.input_type) {
                        case "select":
                            // html = html.replace('<' + counter + '>', '<input-inline-select v-model="componentBaselineAnswers[' + index + ']" :data="questionData[' + index + ']"></input-inline-select>')
                            html = html.replace('<' + counter + '>', `<select class="c-input-inline-select mx-1" v-model="proxyValue[${index}]"><option v-for="(option, index) in componentQuestionData[${index}].options.split(',')" :key="index" :value="option">{{option}}</option></select>`)
                            break;
                        case "text":
                            html = html.replace('<' + counter + '>', `<input class="c-inline-input" type="text" v-model="proxyValue[${index}]" placeholder="${placeholder}" />`)
                        default:
                            break;
                    }
                })
            }

            html = html + '</p>'

            return {
                template: html,
                data: () => ({
                    componentQuestionData: targetObject.baseline_questions,
                    proxyValue: []
                }),

                watch: {
                    proxyValue(newValue) {
                        console.log('proxyvalue: ' + newValue)
                        // this.$emit('input', newValue)
                    }
                },

                mounted() {
                    console.log('mounted')
                    console.log(this.proxyValue)
                },
                created() {
                    // this.proxyValue = this.value
                    console.log('created')
                    console.log(this.proxyValue)
                },
                updated() {
                    console.log('updated')
                    console.log(this.proxyValue)
                }
            }
        },

The problem is that whenever I change an unrelated value, the dynamic vue component refreshes and loses all the data you entered. I've set up a copy of that issue here: https://codesandbox.io/s/vue-2-playground-forked-pc7q4n?file=/src/App.vue

As you can see, when you change the value in the select input below (assigned to the model named period, all data in the form is cleared.

I also tried the v-model method of binding data to the component, see here: https://codesandbox.io/s/vue-2-playground-forked-bt766f? file=/src/ App.vue works, but now every time I enter characters in the input box it loses focus

Can anyone tell me why this happens and how to prevent it?

P粉245276769485 days ago499

Dynamic components in Vue 2 lose their values ​​and refresh when unrelated values ​​change

reply all(1)I'll reply

Dynamic components in Vue 2 lose their values and refresh when unrelated values change