Vue 2 中的动态组件会丢失其值，并在不相关的值发生更改时刷新

Question

我已经为这个问题苦苦挣扎了很长一段时间，并且几乎认为这是一个错误。

我正在使用动态 vue 组件来用输入替换文本正文中的标记。这按预期工作：

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)
                }
            }
        },

问题是每当我更改不相关的值时，动态 vue 组件就会刷新并丢失您输入的所有数据。我在这里设置了该问题的复制：https://codesandbox.io/s/vue-2-playground-forked-pc7q4n?file=/src/App.vue

正如您所看到的，当您更改下面的选择输入中的值（分配给名为 period 的模型时，表单中的所有数据都会被清除。

我还尝试了将数据绑定到组件的 v-model 方法，请参见此处：https://codesandbox.io/s/vue-2-playground-forked-bt766f?file=/src/ App.vue 可以工作，但现在每次我在输入框中输入字符时，它都会失去焦点

谁能告诉我为什么会发生这种情况以及如何预防它？

Answer 1

我不确定这个共享链接是否确实有我的分叉更改，但我只是将您的水合物方法更改为计算属性，现在看起来工作正常。

https://codesandbox.io/s/pc7q4n

编辑

猜想它没有我的更改，但无论如何，只需将水合物方法提升到计算属性中，并在 中使用 this.commitmentTarget 而不是 targetObject >水合物基线问题。如果您需要更多详细信息，请告诉我！