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 可以工作，但现在每次我在输入框中输入字符时，它都会失去焦点
谁能告诉我为什么会发生这种情况以及如何预防它？
