Les composants dynamiques de Vue 2 perdent leurs valeurs et s'actualisent lorsque des valeurs non liées changent

Question

Je lutte avec ce problème depuis longtemps et j'ai presque pensé que c'était un bug.

J'utilise un composant de vue dynamique pour remplacer les balises dans le corps du texte par une entrée. Cela fonctionne comme prévu :

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

Le problème est que chaque fois que je modifie une valeur sans rapport, le composant vue dynamique s'actualise et perd toutes les données que vous avez saisies. J'ai créé une copie de ce problème ici : https://codesandbox.io/s/vue-2-playground-forked-pc7q4n?file=/src/App.vue

Comme vous pouvez le voir, lorsque vous modifiez la valeur dans l'entrée de sélection ci-dessous (attribuée au modèle nommé period), toutes les données du formulaire sont effacées

.

J'ai également essayé la méthode v-model de liaison des données au composant, voir ici : https://codesandbox.io/s/vue-2-playground-forked-bt766f?file=/src/App.vue Cela fonctionne, mais maintenant chaque fois que je saisis des caractères dans la zone de saisie, le focus perd

Quelqu'un peut-il me dire pourquoi cela se produit et comment l'éviter ?

Answer 1

Je ne sais pas si ce lien partagé a réellement modifié mon fork, mais je viens de changer votre méthode d'hydratation en une propriété calculée et cela semble bien fonctionner maintenant.

https://codesandbox.io/s/pc7q4n

Modifier

Je suppose qu'il n'y avait pas mes modifications, mais de toute façon, j'ai simplement promu la méthode hydrate dans la propriété calculée et je l'ai ajoutée dans 中使用 this.commitmentTarget 而不是 targetObject >水合物基线问题. Si vous avez besoin de plus de détails, faites-le-moi savoir !