Komponen dinamik dalam Vue 2 kehilangan nilainya dan menyegarkan semula apabila nilai yang tidak berkaitan berubah

Question

Saya telah lama bergelut dengan masalah ini dan hampir menyangka ia adalah pepijat.

Saya menggunakan komponen vue dinamik untuk menggantikan teg dalam badan teks dengan input. Ini berfungsi seperti yang dijangkakan:

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

Masalahnya ialah apabila saya menukar nilai yang tidak berkaitan, komponen vue dinamik akan menyegarkan dan kehilangan semua data yang anda masukkan. Saya telah menyediakan salinan isu itu di sini: https://codesandbox.io/s/vue-2-playground-forked-pc7q4n?file=/src/App.vue

Seperti yang anda lihat, apabila anda menukar nilai dalam input pilih di bawah (diberikan kepada model bernama period ), semua data dalam borang dikosongkan

Saya juga mencuba kaedah v-model mengikat data kepada komponen, lihat di sini: https://codesandbox.io/s/vue-2-playground-forked-bt766f?file=/src/App.vue Ia berfungsi, tetapi sekarang setiap kali saya masukkan aksara dalam kotak input, ia hilang fokus

Boleh sesiapa beritahu saya mengapa ini berlaku dan bagaimana untuk mencegahnya?

Answer 1

Saya tidak pasti sama ada pautan kongsi ini benar-benar mengalami perubahan fork saya, tetapi saya baru saja menukar kaedah hidrat anda kepada sifat yang dikira dan ia nampaknya berfungsi dengan baik sekarang.

https://codesandbox.io/s/pc7q4n

Sunting

Rasanya ia tidak mempunyai perubahan saya, tetapi bagaimanapun, hanya mempromosikan kaedah hidrat ke dalam sifat yang dikira dan menambahnya dalam 中使用 this.commitmentTarget 而不是 targetObject >水合物基线问题. Jika anda memerlukan butiran lanjut sila beritahu saya!