I've been grappling with this issue for quite some time now and I'm beginning to suspect it might be a bug.
I'm currently utilizing a dynamic vue component to substitute markers in a body of text with input fields. The functionality seems to be working as intended:
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 issue arises when I modify an unrelated value, causing the dynamic vue component to refresh and erase all input data. I have provided a demonstration of the problem here: https://codesandbox.io/s/vue-2-playground-forked-pc7q4n?file=/src/App.vue
Upon changing the value in the select input below (linked to a model named period), all form data gets cleared.
I also attempted a v-model approach to bind the data to the component. You can view it here: https://codesandbox.io/s/vue-2-playground-forked-bt766f?file=/src/App.vue. It somewhat resolves the issue but every time I input a character into a textbox, it loses focus.
Could someone shed light on why this occurs and provide a solution to prevent it?