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

Question

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

Answer 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

Array indices as v-model in Vue template