javascript - 无法使用输入更新 v 模型

Question

我在这样的答案中生成对象:

<el-input :id="'question_' + question.id" v-model="answers[question.id]"></el-input>

...当我填写输入时，它会给出以下输出:

Answers: object
{
 "19":"Hello",
 "20":"Test",
 "22":"04718810200",
 "26":"Belgium"
}

当用户返回页面时，我希望他们看到自己的答案。我在 axios 调用中像这样收集它们:

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
    }
  })
})

它满足我的对象答案，并且我的输入正确填充了保存的答案，但不幸的是，它没有预期的行为。当我想修改输入时，它不起作用。没有任何内容被填满。

为什么？

Answer 1

正如@skirlte所说，有change detection caveats .

Due to limitations in JavaScript, Vue cannot detect the following changes to an array:

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)