無法使用輸入更新 v-model

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 所說，有變更檢測警告。

由於 JavaScript 的限制，Vue 無法檢測到數組的以下更改：

當您直接使用索引設置項目時，例如vm.items[indexOfItem] = newValue 。 當您修改數組的長度時，例如vm.items.length = newLength 。 所以改變這行代碼：

this.answers[question.id] = question.answer.answer

至

this.$set(this.answers, question.id, question.answer.answer)