数组索引作为 Vue 模板中的 v-model

【问题标题】：Array indices as v-model in Vue template数组索引作为 Vue 模板中的 v-model
【发布时间】：2021-05-23 14:37:22
【问题描述】：

我正在使用v-for 循环遍历一个数组以显示每个项目的输入。如何使用另一个数组作为这些输入的 v-model？这是一个说明我的问题的代码笔。 https://codepen.io/jkohlin/pen/XWMMLbe

【问题讨论】：

【解决方案1】：

问题在于您通过直接赋值在this.prediction 中创建的新数组项不是反应式的。这就是为什么 Vue 模板没有使用新值更新的原因。要使新属性具有响应性，您应该使用全局 Vue.set() 或 this.$set() 实例方法。

  mounted() {
    this.dbSavedPredictions.forEach((prediction, i) => {
      this.$set(this.predictions, i, prediction);
    });
  },

您可以在此处阅读有关 Vue 反应性以及如何避免此类问题的更多信息：https://vuejs.org/v2/guide/reactivity.html

【讨论】：