Dynamische Komponenten in Vue 2 verlieren ihre Werte und werden aktualisiert, wenn sich nicht verwandte Werte ändern

Question

Ich habe schon lange mit diesem Problem zu kämpfen und dachte fast, es sei ein Bug.

Ich verwende eine dynamische Vue-Komponente, um Tags im Textkörper durch Eingaben zu ersetzen. Das funktioniert wie erwartet:

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

Das Problem besteht darin, dass die dynamische Vue-Komponente jedes Mal, wenn ich einen unabhängigen Wert ändere, aktualisiert wird und alle von Ihnen eingegebenen Daten verloren gehen. Ich habe eine Kopie dieses Problems hier eingerichtet: https://codesandbox.io/s/vue-2-playground-forked-pc7q4n?file=/src/App.vue

Wie Sie sehen können, werden alle Daten im Formular gelöscht, wenn Sie den Wert in der Auswahleingabe unten ändern (zugeordnet zum Modell mit dem Namen period).

Ich habe auch die

-Methode zum Binden von Daten an die Komponente ausprobiert, siehe hier: https://codesandbox.io/s/vue-2-playground-forked-bt766f?file=/src/App.vue Es funktioniert, aber jetzt Jedes Mal, wenn ich Zeichen in das Eingabefeld eingebe, verliert es den Fokus v-model

Kann mir jemand sagen, warum das passiert und wie man es verhindern kann?

Answer 1

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

https://codesandbox.io/s/pc7q4n

编辑

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