无法使用输入更新 v-model答案

【问题标题】：Impossible to update v-model with inputs无法使用输入更新 v-model
【发布时间】：2019-08-18 16:12:53
【问题描述】：

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

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

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

为什么？

【问题讨论】：

代码中定义的问题在哪里以及它的定义是什么？您能否显示更多代码以及从服务器获取的确切内容
不完全遵循，但this.answers[question.id] = ... 让我想到了属性添加警告以提高反应性：vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

标签： javascript vue.js vuejs2

【解决方案1】：

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

由于 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)

【讨论】：