Les composants dynamiques de Vue 2 perdent leurs valeurs et s'actualisent lorsque des valeurs non liées changent
Je lutte avec ce problème depuis longtemps et j'ai presque pensé que c'était un bug.
J'utilise un composant de vue dynamique pour remplacer les balises dans le corps du texte par une entrée. Cela fonctionne comme prévu :
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)
}
}
},
Le problème est que chaque fois que je modifie une valeur sans rapport, le composant vue dynamique s'actualise et perd toutes les données que vous avez saisies. J'ai créé une copie de ce problème ici : https://codesandbox.io/s/vue-2-playground-forked-pc7q4n?file=/src/App.vue
Comme vous pouvez le voir, lorsque vous modifiez la valeur dans l'entrée de sélection ci-dessous (attribuée au modèle nommé period), toutes les données du formulaire sont effacées
J'ai également essayé la méthode v-model de liaison des données au composant, voir ici : https://codesandbox.io/s/vue-2-playground-forked-bt766f?file=/src/App.vue Cela fonctionne, mais maintenant chaque fois que je saisis des caractères dans la zone de saisie, le focus perd
Quelqu'un peut-il me dire pourquoi cela se produit et comment l'éviter ?
