Vue 2 中的動態元件會遺失其值，並在不相關的值發生變更時刷新
我已經為這個問題苦苦掙扎了很長一段時間，並且幾乎認為這是一個錯誤。
我正在使用動態 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 可以工作，但現在每次我在輸入框中輸入字元時，它都會失去焦點
誰能告訴我為什麼會發生這種情況以及如何預防它？
