无法使用输入更新 v-model [英] Impossible to update v-model with inputs
问题描述
我在这样的答案中生成对象:
I generate objects in answers like this:
<el-input :id="'question_' + question.id" v-model="answers[question.id]"></el-input>
...当我填写输入时给出以下输出:
...which gives the following output when I fill in inputs:
Answers: object
{
"19":"Hello",
"20":"Test",
"22":"04718810200",
"26":"Belgium"
}
当用户返回页面时,我希望他们看到他们的答案.我在 axios
调用中像这样收集它们:
When users come back to the page, I want them to see their answers. I collect them like this in my axios
call:
axios.get('/bilan/' + this.$route.params.id).then(response => {
this.questions = response.data.data
this.questions.questions.forEach(question => {
if (question.answer) {
this.answers[question.id] = question.answer.answer
}
})
})
它满足了我的对象答案,并且我的输入正确地填充了保存的答案,但不幸的是,它没有预期的行为.当我想修改输入时,它不起作用.什么都填不满.
It fulfills my object answers, and my inputs are correctly filled with the answers saved, but unfortunately, it does not have the expected behavior. When I want to modify an input, it does not work. Nothing fills up.
为什么?
推荐答案
正如@skirlte 所说,有 更改检测警告.
As @skirlte stated, there are change detection caveats.
由于 JavaScript 的限制,Vue 无法检测到以下内容对数组的更改:
Due to limitations in JavaScript, Vue cannot detect the following changes to an array:
当您直接使用索引设置项目时,例如vm.items[indexOfItem] = newValue
.修改长度时数组,例如vm.items.length = newLength
.所以改变这行代码:
When you directly set an item with the index, e.g.
vm.items[indexOfItem] = newValue
. When you modify the length of the
array, e.g. vm.items.length = newLength
.
So change this lined of code:
this.answers[question.id] = question.answer.answer
到
this.$set(this.answers, question.id, question.answer.answer)
这篇关于无法使用输入更新 v-model的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!