我已經在這個問題上苦苦掙扎了很長時間，并且正處于認為這是一個錯誤的邊緣。
我正在使用動態 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 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 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 組件都會重繪 并丟失您輸入的所有資料。我在這里設定了 isse 的復制：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哪種有效但是現在每次我在輸入框中輸入一個字符時，它都會失去焦點
誰能告訴我為什么會發生這種情況以及如何預防？
uj5u.com熱心網友回復：
我不確定這個共享鏈接是否真的有我的分叉更改，但我只是將您的水合物方法更改為計算屬性，現在它似乎作業正常。
https://codesandbox.io/s/pc7q4n
編輯
猜猜它沒有我的更改，但無論如何只需將該 hydrate 方法提升到計算屬性中，并使用this.commitmentTarget而不是targetObjectinside hydrateBaselineQuestion。如果您需要更多詳細資訊，請告訴我！
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/510583.html