I've been struggling with this issue for a long time now and am on the verge of thinking it's a bug.

I am using a dynamic vue component to replace markers in a body of text with inputs. This is working 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  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  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 whenever I change a non related value, the dynamic vue component refreshes and looses all data you've input. I've set up a replication of the isse 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 (which is assigned to a model called period all data in the form get's cleared.

I've also tried a v-model method of binding the data to the component see here: https://codesandbox.io/s/vue-2-playground-forked-bt766f?file=/src/App.vue which kind of works but now every time I enter a character into an input box, it looses focus

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

CodePudding user response：

I'm not sure if this share link actually has my forked changes, but i just changed your hydrate method to a computed property instead and it seems to work fine now.

https://codesandbox.io/s/pc7q4n

EDIT

Guess it didn't have my changes, but anyways just lift that hydrate method out into a computed property, and use this.commitmentTarget instead of targetObject inside hydrateBaselineQuestion. Lemme know if you need more details!