Dynamic components in Vue 2 lose their values and refresh when unrelated values change
I've been struggling with this problem for a long time and almost thought it was a bug.
I'm using a dynamic vue component to replace tags in the text body with input. This works as expected:
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)
}
}
},
The problem is that whenever I change an unrelated value, the dynamic vue component refreshes and loses all the data you entered. I've set up a copy of that issue here: https://codesandbox.io/s/vue-2-playground-forked-pc7q4n?file=/src/App.vue
As you can see, when you change the value in the select input below (assigned to the model named period, all data in the form is cleared.
I also tried the v-model method of binding data to the component, see here: https://codesandbox.io/s/vue-2-playground-forked-bt766f? file=/src/ App.vue works, but now every time I enter characters in the input box it loses focus
Can anyone tell me why this happens and how to prevent it?
