我已經為這個問題苦苦掙扎了很長一段時間,並且幾乎認為這是一個錯誤。
我正在使用動態 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 可以工作,但現在每次我在輸入框中輸入字元時,它都會失去焦點
誰能告訴我為什麼會發生這種情況以及如何預防它?
P粉1535039892023-09-08 13:58:58
我不確定這個共享連結是否確實有我的分叉更改,但我只是將您的水合物方法更改為計算屬性,現在看起來工作正常。
https://codesandbox.io/s/pc7q4n
編輯
猜想它沒有我的更改,但無論如何,只需將水合物方法提升到計算屬性中,並在 中使用
。如果您需要更多詳細信息,請告訴我! this.commitmentTarget
而不是targetObject
>水合物基線問題